如何在 React.js 中使用 JavaScript 修改 CSS

Posted 2023-02-22

【中文标题】如何在 React.js 中使用 JavaScript 修改 CSS

【英文标题】：How to modify CSS using JavaScript in React.js

【发布时间】：2020-12-31 12:32:42

【问题描述】：

如何在 React 上使用 javascript 更改 css 样式？

例如，我会这样做：

document.querySelector('.container').style.backGroundColor='purple';

对吗？还是我应该用另一种方式来实现？

【问题讨论】：

你在 React 中的 CSS 遵循了哪种方式？

【参考方案1】：

你可以使用 style 属性。

<SomeComponent style=
    backgroundColor: someCondition ? 'purple' : null
 />

【讨论】：

避免像瘟疫一样的内联样式。在当时似乎是个好主意，但以后会变得很难维护

【参考方案2】：

考虑段落元素

document.getElementsByClassName("container").style.color = "blue";

【讨论】：

这是一种非常必要的方式，与 React 相矛盾。

@StefanBajić 你能否详细说明它与 React 有何矛盾？

我认为你的代码会在组件的下一次渲染后中断

【参考方案3】：

在 Reactjs 中更改 css 的简单方法是 Inline styling。其他方式可以查看：https://codeburst.io/4-four-ways-to-style-react-components-ac6f323da822

举个例子。如果您想更改用户状态的颜色。活动为绿色，非活动为红色。

const Example = (props) => 
    let isActive = Math.floor(Math.random() * 2) % 2 === 0;
    const color = isActive ? 'green' : 'red';

    return <div style=backgroundColor: color> isActive ? 'Active' : 'Deactive' </div>;

或者：

const Example = (props) => 
    let isActive = Math.floor(Math.random() * 2) % 2 === 0;
    
    return <div style=backgroundColor: isActive ? 'green' : 'red'> isActive ? 'Active' : 'Deactive' </div>;

或所有样式：

const Example = (props) => 
    let isActive = Math.floor(Math.random() * 2) % 2 === 0;
    let styleStatus = isActive ?
        
            backgroundColor: 'green',
            fontSize: '20',
         :
        
            backgroundColor: 'red',
            fontSize: '15',
        ;

    return <div style=styleStatus> isActive ? 'Active' : 'Deactive' </div>;

【参考方案4】：

像这样创建一个 const 类型的 obj（必须在 render 方法中创建）

const mystyle = 
      color: "white",
      backgroundColor: "DodgerBlue",
      padding: "10px",
      fontFamily: "Arial"
    ;

并像这样将其分配给您的元素

h1 style=mystyle>Hello Style!</h1>