ReactJS使用colors.less更改多个组件的背景色

Question

上下文

我想进行切换以使用colors.less更改多个组件的背景色。

---

想法

我希望您可以做以下事情...

colors.less

@primary-color: @white;
@white: #ffffff;
@black: #000000;

index.js

if (e.target.checked) {
    console.log('toggle on')
    colors.primary-color = @black;
} else {
    console.log('toggle off')
    colors.primary-color = @white;
}

请注意：这是比实际代码更多的伪代码。

结果

然后从下面开始，每个使用@ primary-color的组件都将变为黑色或白色。

---

问题

这可能吗？

如果是，怎么办？

Answer 1

您可以按照建议创建一个colors.less文件，在其中定义颜色。

// colors.less
@white: #ffffff;
@black: #000000;

在组件的less文件中， 导入较少的文件，并将其值应用于classNames：

Import 'colors.less';
.isActive {
    background: @white;
}
.isInactive {
    background: @black;
}

现在，您可以使用所需的逻辑来应用这些className。

<div className={checked ? "isActive" : "isInactive}/>