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

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;
  }
}

但在 styled-components 中这是不可能的。我目前看到的一种方法是像这样设置主题变量：

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};
  }
`;