如何根据媒体查询更新样式化组件的变量？

Question

我的主题如下：

const theme = {color: red};

我以这种方式在组件中使用这个变量：

const Button = styled.button`
color: ${props => props.theme.color};
`;

我希望如果屏幕宽度小于992，颜色变成绿色。如何使用样式化组件主题化来实现这一点？因为，使用css变量我可以做下一步：

:root {
--color: red;

@media (max-width: 991px) {
--color: green;
}
}

但在样式化组件中，这是不可能的。我目前看到的一种方法是设置这样的主题变量：

const theme = {color: var(--color)}

但在这种情况下，我不能在js中使用这个变量值。那么，解决方案是什么呢？

Answer 1

您可以以大致相同的方式使用带有样式组件的媒体查询，因此，如果您在主题对象中使用了想要使用的两种颜色，您最终会得到类似的东西

const Button = styled.button`
color: ${props => props.theme.colorRed};
@media (max-width: 991px) {
color: ${props => props.theme.colorGreen};
}
`;