CSS 在 create-react-app 中的条件性样式

在本文中，我们将介绍在 create-react-app 中使用条件性样式的方法。create-react-app 是一个用于快速搭建 React 应用程序的工具，它提供了许多便捷的功能和约定。其中之一就是如何在 CSS 中实现条件性样式，根据给定的条件来改变元素的外观。

在 create-react-app 中，我们可以使用多种方法来实现条件性样式，包括使用 CSS 模块、CSS-in-JS 库以及内联样式。接下来我们将介绍这些方法，并提供示例说明。

阅读更多：CSS 教程

使用 CSS 模块

CSS 模块是一个用于模块化 CSS 的标准，它可以帮助我们在 React 应用中实现条件性样式。在 create-react-app 中，默认支持 CSS 模块。我们可以在 CSS 文件中定义多个类名，然后根据条件在元素上切换这些类名来改变样式。

例如，我们有一个按钮组件，并且希望在按钮被点击后改变其颜色。首先，我们在 CSS 文件中定义两个类名：

.button {
  background-color: blue;
  color: white;
}

.button-clicked {
  background-color: red;
  color: black;
}

然后在按钮组件中使用这些类名：

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

const Button = () => {
  const [clicked, setClicked] = useState(false);

  const handleClick = () => {
    setClicked(true);
  };

  return (
    <button
      className={clicked ? styles.buttonClicked : styles.button}
      onClick={handleClick}
    >
      Click me
    </button>
  );
};

export default Button;

在上面的示例中，我们使用 useState 钩子来创建一个 clicked 状态变量，并通过 setClicked 方法来改变其值。然后根据 clicked 的值，我们切换按钮的类名从而改变样式。

使用 CSS-in-JS 库

CSS-in-JS 是一种以 JavaScript 对象的形式编写样式的方法，它可以让我们在 React 应用中更方便地实现条件性样式。在 create-react-app 中，我们可以使用许多流行的 CSS-in-JS 库，例如 styled-components 和 emotion。

以 styled-components 为例，我们可以通过定义多个样式模板，在组件中根据条件来选择应用哪个模板。

首先，我们定义两个样式模板：

import styled from 'styled-components';

const Button = styled.button`
  background-color: {props => props.clicked ? 'red' : 'blue'}; color:{props => props.clicked ? 'black' : 'white'};
`;

export default Button;

然后在组件中使用这些样式模板：

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

const App = () => {
  const [clicked, setClicked] = useState(false);

  const handleClick = () => {
    setClicked(true);
  };

  return (
    <Button clicked={clicked} onClick={handleClick}>
      Click me
    </Button>
  );
};

export default App;

在上面的示例中，我们使用 useState 钩子来创建一个 clicked 状态变量，并通过 setClicked 方法来改变其值。然后根据 clicked 的值，我们选择应用不同的样式模板从而改变按钮的样式。

使用 CSS-in-JS 库可以让我们更灵活地组织样式，并充分利用 JavaScript 的能力来控制条件性样式。

使用内联样式

create-react-app 还支持使用内联样式来实现条件性样式。内联样式是一种在元素上直接定义样式的方法，它可以让我们根据条件以对象的形式传递样式属性。

例如，我们有一个按钮组件，并且希望在按钮被点击后改变其颜色。我们可以使用内联样式来实现：

import React, { useState } from 'react';

const Button = () => {
  const [clicked, setClicked] = useState(false);

  const handleClick = () => {
    setClicked(true);
  };

  const buttonStyle = {
    backgroundColor: clicked ? 'red' : 'blue',
    color: clicked ? 'black' : 'white',
  };

  return (
    <button style={buttonStyle} onClick={handleClick}>
      Click me
    </button>
  );
};

export default Button;

在上面的示例中，我们使用 useState 钩子来创建一个 clicked 状态变量，并通过 setClicked 方法来改变其值。然后根据 clicked 的值，我们传递不同的内联样式对象来改变按钮的样式。

使用内联样式可以让我们更直观地编写样式，并将其与组件逻辑紧密结合。

总结

在本文中，我们介绍了在 create-react-app 中实现条件性样式的方法。我们可以使用 CSS 模块、CSS-in-JS 库和内联样式来根据条件来改变元素的外观。每种方法都有其特点和适用场景，我们可以根据自己的需求和偏好选择最合适的方法。无论使用哪种方法，我们都可以灵活地在 React 应用中实现条件性样式，从而提升用户体验和界面交互。