如何在 React JS 中使用 LESS 变量答案

【问题标题】：How to use LESS variable in React JS如何在 React JS 中使用 LESS 变量
【发布时间】：2019-01-27 12:27:48
【问题描述】：

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

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

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

【问题讨论】：

是scss/less变量还是原生css变量？
<p style={{ color: tertiary-col }}> .. 但我不认为“tertiary-col”是一个有效的变量名
@shmotam 嗨，是的，对不起，我的意思是 LESS 不是 CSS

标签： javascript css reactjs

【解决方案1】：

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

const redColor = "#FF0000";

<p style={{ color: redColor }}

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

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

另一种选择是使用 native CSS variables 作为其他答案的建议，您可以在 JavaScript 中使用这些变量，这样做的缺点是它们 aren't supported by all browsers（还）。

【讨论】：

您可以 AFAIK 在支持它的浏览器上使用原生 CSS 属性 color: --some-css-var。
IE11是唯一不支持@var的浏览器。

【解决方案2】：

可以使用原生var() 来做到这一点。

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

您可以使用--tertiary-col: @tertiary-col;，但出于 sn-p 的目的，我输入了一个实际的十六进制值。

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

&lt;p style="color: var(--tertiary-col)"&gt;Some text&lt;/p&gt;

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

【讨论】：

【解决方案3】：

在 React 中使用原生 css 变量：

假设您想为某个元素中的任何文本节点在明暗主题之间切换：

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

然后，任何父元素都可以设置该变量，并且它有效地充当任何明确选择使用该特定 CSS 变量的子元素的上下文：

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

Reference

【讨论】：