如何在 React JS 中使用 LESS 变量

Question

I have the following tag with a hard-coded color:

<p style={{ color: '#646464' }}>

I want to use a LESS variable that I've defined instead, let's called it @tertiary-col , how would I use this variable? <p style={{ color: '@tertiary-col' }}> doesn't seem to work

Answer 1

You cannot use variables from CSS-precompilers like LESS inside of your JSX. You can either use JavaScript variables like

const redColor = "#FF0000";

<p style={{ color: redColor }}

Or give it a className and let your CSS handle the rest.

Another option would be to add a loader like less-vars-to-js to map your LESS variables (I'm assuming you mean LESS as you're using @ ) to JavaScript.

And another option would be to use native CSS variables as other answers suggested, you can use these variables within your JavaScript, the downside on this is that they aren't supported by all browsers (yet).

Answer 2

It is possible to use native var() to do this.

By placing the variable in :root then it becomes available anywhere you need to use it.

You would do --tertiary-col: @tertiary-col; , but for the purposes of the snippet I have put in an actual hex value.

 :root { --tertiary-col: @tertiary-col; /* this is what you would do */ --tertiary-col: #646464; /* @tertiary-col; */ }

 <p style="color: var(--tertiary-col)">Some text</p>

Here is an excellent tutorial on css variables: https://codepen.io/abcretrograde/full/xaKVNx/

Answer 3

For using native css variables in React:

Let's say you want to toggle between light and dark themes for any text nodes in a certain element:

const LightDarkSpan = ({ children }) => (
  <span style={{
    color: 'var(--text-color, black)'
  }}>
    {children}
  </span>
);

Then, any parent can set that variable, and it effectively acts as context to any child element that explicitly chooses to use that specific CSS variable:

// rendered
<div style={{
  backgroundColor: 'black',
  '--text-color': 'white'
}}>
  <article>
    <LightDarkSpan>testing</LightDarkSpan>
  </article>
</div>

Reference