使用css变量与样式组件

Question

我知道你可以用<ThemeProvider />包装你的react应用程序，你可以为主题设置一个变量，并像这样访问它:

const Text styled`
color: ${((props) => props.theme.red)};
`

但是是CSS本身有变量特性吗?

你可以直接写

:root {
--red: tomato; 
}
.text {
color: var(--red);
}

可以混合它们吗?还是坚持使用样式组件或CSS?

Answer 1

可以。这两种技术彼此没有关系，也不冲突。

只要你的组件可以继承CSS变量(也就是自定义属性)，它们就可以工作。

只要确保它们确实是继承的。

在根元素选择器(html)上明确定义变量将使它们在任何地方可用，但有时你不想要全局变量，而是更局部的，每个页面/区域/组件，所以你需要考虑到这一点来构建你的代码。

CSS变量的真正力量在于它们的继承(不像SCSS变量在构建过程中被注入/替换)。

样式化组件的功能是隔离&与javascript共享代码的能力。这确实阻碍了它们继承父级定义的CSS变量的能力。

您根本不需要为这个问题而烦恼，只需忽略您正在使用styled-components的事实。重要的是HTML的结构，即继承是如何工作的。

我帮你谷歌了一下。

1. https://medium.com/fbdevclagos/how-to-leverage-styled-components-and-css-variables-to-build-truly-reusable-components-in-react-4bbf50467666
2. https://betterprogramming.pub/7 -方法- -继承样式-使用-风格的组件- 69 debaad97e3
3. https://dev.to/arnonate/using-css-variables-to-tame-styled-component-props-2f9o