score:7

Accepted answer

It should be like this if you want to use css custom properties

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

score:2

It is working, but you need to give the variable to var() if you want to use it in the inlined styles.

Example

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>


Related Query

More Query from same tag