javascript - 如何在 React JS 中使用 LESS 变量

Question

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

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

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

Answer 1

可以使用 native 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/