时间戳

首页 > 解决方案 > 如何在 React JS 中使用 LESS 变量

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

问题描述

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

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

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

标签： javascriptcssreactjs

解决方案

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

推荐阅读