我是样式组件的新手，并尝试实现与编写普通CSS一样干净的已编译CSS。

给出以下香草css示例：

.box {
  border: 1px solid;
}

.box--1 {
  border-color: red;
}

.box--2 {
  border-color: green;
}

例如在react应用中使用样式化组件时，这是两种实现方式：

const Wrapper = styled.div`
  border: 1px solid;
`;

const RedWrapper = styled(Wrapper)`
  border-color: red;
`;

const GreenWrapper = styled(Wrapper)`
  border-color: green;
`;

const WrapperB = styled.div`
  border: 1px solid;
  border-color: ${props => props.red ? "red" : "green"}
`;

但是已编译的CSS始终如下所示：

.box--1 { border: 1px solid red; }
.box--2 { border: 2px solid green; }

这是具有两个示例性实现的链接：https://codesandbox.io/s/focused-poitras-ib6cb

有什么方法可以通过样式化的组件实现香草CSS示例？

免责声明：我知道样式化组件示例的编译输出并不重要。我很好奇。