在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)',
};

Answer 2

它正在工作，但是如果要在嵌入式样式中使用它，则需要将变量给予var()。

示例

function App() {
  const style = {
    color: "var(--red)"
  };
  return <div style={style}>Foo</div>;
}
ReactDOM.render(<App />, document.getElementById("root"));

:root {
  --red: #F65959;    
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/react/16.6.3/umd/react.production.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react-dom/16.6.3/umd/react-dom.production.min.js"></script>
<div id="root"></div>