如何在 React JS 中使用 LESS 变量

Question

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

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

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

Answer 1

可以使用本机var()来执行此操作。

通过将变量放入其中，:root它就可以在您需要使用它的任何地方可用。

你会这样做--tertiary-col: @tertiary-col;，但为了代码片段的目的，我输入了实际的十六进制值。

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

这是关于 css 变量的优秀教程： https: //codepen.io/abcretrograde/full/xaKVNx/

Answer 2

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

const redColor = "#FF0000";

<p style={{ color: redColor }}

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

另一种选择是添加一个像less-vars-to-js这样的加载器来将 LESS 变量（我假设您正在使用的意思是 LESS @）映射到 JavaScript。

另一种选择是使用本机 CSS 变量，正如其他答案所建议的那样，您可以在 JavaScript 中使用这些变量，这样做的缺点是并非所有浏览器都支持它们（尚）。