Как поддерживать переменные CSS в Styled-компонентов?

Question

Я использую Next js, я сделал с моим проектом, но в IE11 макет не работает для цветов у меня есть цвета, такие как: root {--color: # 000} в файле CSS

Проблема в том, что IE не поддерживает переменные CSS. Как мне решить эту проблему

Я пытался использовать postcss со стилевым компонентом, но не работал

Answer 1

С помощью Styled Components вы можете просто использовать переменные 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