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

Posted 2023-02-22

【中文标题】在 React 组件中使用 css/scss 变量作为内联样式

【英文标题】：Use css/scss variable in React component as inline style

【发布时间】：2019-08-04 04:41:12

【问题描述】：

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

我想在下面做这样的事情

scss

$red: #F65959;


:root 
  --red: $red;    

js

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

export default style;

【参考方案1】：

如果要使用css custom properties应该是这样的

:root 
  --red: #$red;

const style = 
  color: 'var(--red)',
;

【参考方案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>