Question

我使用Next js完成了我的项目，但在IE11中布局已损坏对于颜色，我在css文件中有：root {--color：＃000}这样的颜色

问题是IE不支持CSS变量，我该怎么解决

我试图将postcss与带样式的组件一起使用，但是没有用

Answer 1

使用样式化组件，您只能使用JavaScript变量，因为您是使用模板文字定义它们的。这是一个示例：

在JavaScript文件中定义颜色变量：

// file Colors.js

const Colors = {
  red: '#ff00ff',
  green: '#00ff00',
  blue: '#0000ff',
}

export default Colors

在样式中使用这些颜色：

// file Button.style.js

import Colors from './Colors'

const Button = styled.button`
  background-color: ${Colors.blue};
  color: ${Colors.green};
  border: 1px solid ${Colors.red};
`

export default Button

如何在样式组件中支持CSS变量？

1 个答案: