CSS 如何动态改变 ReactJS 样式

在本文中，我们将介绍如何使用 CSS 和 ReactJS 动态改变样式。CSS 是一种用于网页样式布局的语言，而 ReactJS 是一个流行的 JavaScript 库，用于构建用户界面。

阅读更多：CSS 教程

动态样式

在 ReactJS 中，样式是通过 CSS 类来定义和应用的。通过使用 JavaScript，我们可以动态改变这些 CSS 类，从而实现动态改变样式的效果。

使用 state

在 ReactJS 中，我们可以使用 state 来管理组件的状态。state 是一个包含属性的 JavaScript 对象，当 state 改变时，ReactJS 会自动重新渲染页面。

我们可以利用 state 来控制样式。例如，我们可以创建一个名为 isActive 的 state 属性，并在组件渲染时基于该属性来添加或移除一个 CSS 类。

import React, { useState } from 'react';
import './styles.css';

function App() {
  const [isActive, setIsActive] = useState(false);

  const handleClick = () => {
    setIsActive(!isActive);
  };

  return (
    <div className={`box ${isActive ? 'active' : ''}`} onClick={handleClick}>
      Click Me
    </div>
  );
}

export default App;

在上述示例中，当 isActive 为 true 时，样式中的 active 类会被添加到 box 元素上。当 isActive 为 false 时，该类会被移除。

使用样式对象

除了使用 CSS 类之外，我们还可以使用样式对象来直接改变元素的样式。

import React, { useState } from 'react';

function App() {
  const [backgroundColor, setBackgroundColor] = useState('#ffffff');

  const handleClick = () => {
    if (backgroundColor === '#ffffff') {
      setBackgroundColor('#000000');
    } else {
      setBackgroundColor('#ffffff');
    }
  };

  const boxStyle = {
    backgroundColor: backgroundColor,
    width: '200px',
    height: '200px',
    margin: '20px',
    padding: '20px',
    border: '1px solid black',
  };

  return (
    <div style={boxStyle} onClick={handleClick}>
      Click Me
    </div>
  );
}

export default App;

在上述示例中，我们使用 backgroundColor state 属性来管理盒子的背景颜色。每当用户点击盒子时，背景颜色就会改变。

使用 CSS 变量

CSS 变量是一种可以在整个样式表中重复使用的值。通过改变 CSS 变量的值，我们可以动态改变元素的样式。

首先，在样式表中定义 CSS 变量：

:root {
  --main-color: #ffffff;
}

然后，在组件中使用 CSS 变量：

import React, { useState } from 'react';
import './styles.css';

function App() {
  const [mainColor, setMainColor] = useState('#ffffff');

  const handleClick = () => {
    if (mainColor === '#ffffff') {
      setMainColor('#000000');
    } else {
      setMainColor('#ffffff');
    }
  };

  const boxStyle = {
    '--main-color': mainColor,
  };

  return (
    <div className="box" style={boxStyle} onClick={handleClick}>
      Click Me
    </div>
  );
}

export default App;

在上述示例中，我们通过 CSS 变量 --main-color 来动态改变盒子的背景颜色。