如何在反应 js 代码中动态更改 css 选择器属性值？

Posted 2023-03-06

【中文标题】如何在反应 js 代码中动态更改 css 选择器属性值？

【英文标题】：How to dynamically change css selector property value in react js code?

【发布时间】：2018-03-22 21:07:49

【问题描述】：

我需要为特定选择器动态更改反应组件中的颜色。 在 scss（使用 sass）中，我有以下规则：

foo.bar.var * 
  color: blue;

我想在 React 代码中将其更改为黄色、红色或其他。

我不能使用 style 属性作为元素，因为我需要选择器 申请所有子孩子！=)

有没有原生的方法？或者我应该使用镭？或者有没有类似的库？也许 css-next some hove 可以帮助解决这个问题？

我有颜色选择器，我无法为每种颜色编写类样式 =(

对于一些回答者注意：

所以我在一些 scss 文件中有选择器，该选择器在带有 .class * color: $somecolor 的一些根 js 文件中导入，我需要在颜色选择器中选择颜色期间更改该选择器中的 $somecolor

也许我可以以某种方式为所有嵌套在 style 属性中的选择器设置选择器？或者有一种方法可以为style 属性中的每个嵌套项目递归应用 css 样式？

【参考方案1】：

怎么样

class MyComponent extends React.Component 
  render() 
    const yellow = true // Your condition
    
    return(
      <div className=`foo bar var $yellow  && 'yellow'`
        My item
      </div>
    )
  

.foo.bar.var 
  & * 
    color: blue;
  
  &.yellow * 
    color: yellow;
  

【讨论】：

我有颜色选择器，我不能为每种颜色写样式 =(

我需要更改选择器内的 css 属性值

你不能在你的子孩子的父母中应用样式标签？

你到底是什么意思？我在当前组件中有很多嵌套元素。就像 div inside div inside div inside div inside div。如果我更改 maing(root/parent) 的样式，则仅在其中更改颜色。但我需要将它递归地应用于每一个。其他样式，如引导程序为它们设置颜色，所以我应该使用选择器，应用颜色样式道具，覆盖其他选择器（如引导程序或其他）

您能发布一个用于颜色选择器的 html 示例吗？

【参考方案2】：

这听起来可能很愚蠢。但这行得通吗？

import myCss from './mydesign.css';

myCss.foo.bar.var = "your color"

【讨论】：

如果我有文件，我在其中一个一个地导入每个 css 文件。我不在每个组件中导入 css。如何处理这种情况？会不会错了，我在组件中再次导入css？

如果您要在父组件中导入所有 css，并且希望从子组件中更改它，则不必在子组件中导入 css，创建一个可以更改颜色的函数在父组件中并将其作为道具发送给子组件，每当您需要从子组件更改颜色时，只需从子组件调用道具，它就会起作用，对吧？

我不知道=（现在我的根目录中有类似的东西import './my_scss/bootstrap/css/bootstrap.css'; import './my_scss/custom.scss'; 如果我将导入的变量分配给变量，我应该改变一些东西吗？或者如果分配给变量，一切都会一样？=）

【参考方案3】：

您可以使用元素的样式属性定义custom CSS property (CSS variables)，并将值分配给道具、状态等。

<div className='foo bar var' style= "--my-color": props.color ></div>

自定义属性适用于任何适用于该组件或子组件的选择器。所以你可以这样使用它：

foo.bar.var * 
  color: var(--my-color);

查看类似代码的 sn-p here