如何使用样式化组件创建上下文样式？（零选择器）答案

【问题标题】：How to create contextual styling with styled components? (zero selector)如何使用样式化组件创建上下文样式？（零选择器）
【发布时间】：2023-03-20 01:29:01
【问题描述】：

我想知道是否可以在没有任何 CSS 选择器的情况下创建上下文样式。

类似：

<Button primary>
    <Text>BUTTON</Text> // if the button is primary then have 20px padding else 0
    <Icon/> // if the button is primary then have red background
</Button>

我不想在这些方面使用 CSS 的原因是我想在 React Native 中分享我的组件（你没有任何选择器或 css）

【问题讨论】：

标签： css reactjs react-native styled-components

【解决方案1】：

CSS 是要走的路。不知道你为什么不想使用它。

button {
    padding: 0;
}

button[primary] {
    padding: 20px;
}

button[primary] icon {
    background-color: red;
}

如果您不想使用 CSS，也许请说明您的原因，我也许可以改进我的答案。

【讨论】：

好吧，我真的会采用 css 方式，但我有点想与我的 RN 代码库共享这些组件。