我知道你可以用<ThemeProvider /> Package 你的react应用程序，你可以为主题设置一个变量，然后像这样访问它：
<ThemeProvider />
const Text styled` color: ${((props) => props.theme.red)}; `
但它是不是CSS本身就有变量的特性呢？你就可以
:root { --red: tomato; } .text { color: var(--red); }
可以混合使用它们吗？还是坚持使用样式化组件或CSS？
ecbunoof1#
是的，没关系。这两种技术彼此没有关系，也不冲突。只要你的组件可以继承CSS变量（AKA自定义属性），它们就可以工作。只要确定他们是真的继承。在根元素选择器（html）上明确定义变量将使它们在任何地方都可用，但有时您不希望使用全局变量，而是希望使用更多的局部变量，针对每个页面/区域/组件，因此您需要考虑到这一点来构建代码。CSS变量的真实的威力在于它们的继承性（不像SCSS变量在构建过程中被注入/替换）。样式化组件的强大之处在于它的隔离性和与javascript共享代码的能力，这确实阻碍了它们继承父级定义的CSS变量的能力。您根本不需要为这个问题烦恼，并且忽略您正在使用styled-components的事实。所有重要的是HTML结构，继承是如何工作的。
html
styled-components
1条答案
按热度按时间ecbunoof1#
是的，没关系。这两种技术彼此没有关系，也不冲突。
只要你的组件可以继承CSS变量（AKA自定义属性），它们就可以工作。
只要确定他们是真的继承。
在根元素选择器（
html）上明确定义变量将使它们在任何地方都可用，但有时您不希望使用全局变量，而是希望使用更多的局部变量，针对每个页面/区域/组件，因此您需要考虑到这一点来构建代码。CSS变量的真实的威力在于它们的继承性（不像SCSS变量在构建过程中被注入/替换）。
样式化组件的强大之处在于它的隔离性和与javascript共享代码的能力，这确实阻碍了它们继承父级定义的CSS变量的能力。
您根本不需要为这个问题烦恼，并且忽略您正在使用
styled-components的事实。所有重要的是HTML结构，继承是如何工作的。我为你谷歌了很多东西：