如何在 React JS 中使用 LESS 变量 [英] How to use LESS variable in React JS

问题描述

我有以下带有硬编码颜色的标签:

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

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

我想使用我定义的 LESS 变量，我们称之为 @tertiary-col，我将如何使用这个变量?<p style={{ color: '@tertiary-col' }}> 似乎不起作用

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

推荐答案

您不能在 JSX 中使用来自 CSS 预编译器(如 LESS)的变量.您可以使用 JavaScript 变量，例如

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 }}

或者给它一个 className，让你的 CSS 处理剩下的事情.

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

另一种选择是添加一个加载器，如 less-vars-to-js 将您的 LESS 变量(我假设您的意思是 LESS，因为您使用 @)到 JavaScript.

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.

另一种选择是使用 原生 CSS 变量 作为其他答案的建议，您可以在 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).

这篇关于如何在 React JS 中使用 LESS 变量的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！