在 React 组件中使用 css/scss 变量作为内联样式

Question

有没有一种有效的方法可以在 React 组件中使用 SCSS 或 CSS 变量作为内联样式？

我想在下面做这样的事情

scss

$red: #F65959;


:root {
  --red: $red;    
}

js

const style = {
  color: '--red',
};

export default style;

Answer 1

如果要使用css自定义属性应该是这样的

:root {
  --red: #{$red};
}
const style = {
  color: 'var(--red)',
};