create-react-app 中的条件 CSS

CSS

在使用create-react-app时，我们经常会遇到需要根据条件来加载不同的CSS样式的情况。这种情况通常发生在我们需要根据特定条件来改变组件的外观时。幸运的是，create-react-app提供了一种简单而有效的方法来实现条件CSS。

在React中，我们可以使用内联样式或者CSS模块来实现条件CSS。如果我们选择使用内联样式，我们可以根据条件来动态地设置组件的style属性。这样，我们就可以根据不同的条件加载不同的样式。

让我们来看一个示例，假设我们有一个按钮组件，根据用户是否登录来改变按钮的颜色。如果用户已登录，按钮将显示为绿色，如果用户未登录，按钮将显示为红色。

首先，我们需要定义一个状态来表示用户是否登录。我们可以使用useState钩子来实现这一点：

JSx
import React, { useState } from 'react';
const Button = () => {
  const [isLoggedIn, setIsLoggedIn] = useState(false);
  const handleClick = () => {
    setIsLoggedIn(!isLoggedIn);
  }
  return (
    <button</p>      style={{
        backgroundColor: isLoggedIn ? 'green' : 'red',
        color: 'white',
        padding: '10px 20px',
        border: 'none',
        borderRadius: '5px',
        cursor: 'pointer'
      }}
      onClick={handleClick}
    >
      {isLoggedIn ? 'Logout' : 'Login'}
    </button>
  );
}
export default Button;

在上面的代码中，我们使用了useState钩子来定义一个名为isLoggedIn的状态，并将其初始值设置为false。然后，我们定义了一个handleClick函数，用于在按钮被点击时切换isLoggedIn的值。最后，我们根据isLoggedIn的值来动态地设置按钮的样式。

在按钮的style属性中，我们使用了三元运算符来判断isLoggedIn的值。如果isLoggedIn为true，我们将按钮的背景颜色设置为绿色；如果isLoggedIn为false，我们将按钮的背景颜色设置为红色。

除了按钮的背景颜色，我们还可以根据不同的条件来设置其他样式属性，比如文字颜色、边框、边框半径等等。这使得我们可以根据不同的条件来完全改变组件的外观，从而提供更好的用户体验。

更复杂的条件CSS

除了简单的条件CSS外，create-react-app还支持更复杂的条件CSS需求。例如，我们可能需要根据不同的设备类型来加载不同的CSS样式。

为了实现这一点，我们可以使用CSS模块。首先，我们需要安装CSS-loader和style-loader这两个库，以便我们可以在React中使用CSS模块。我们可以使用以下命令来安装它们：

npm install CSS-loader style-loader

接下来，我们需要创建一个CSS模块文件，并根据不同的条件来定义不同的样式。我们可以在模块文件中使用CSS类来实现这一点。

CSS
/* styles.module.CSS */
.button {
  padding: 10px 20px;
  border: none;
  border-radius: 5px;
  cursor: pointer;
}
.green {
  background-color: green;
  color: white;
}
.red {
  background-color: red;
  color: white;
}

在上面的代码中，我们定义了一个名为button的基础样式类，并在不同的条件下定义了两个子样式类：green和red。这两个子样式类分别表示按钮的绿色和红色样式。

然后，我们可以在我们的组件文件中使用这些样式类。我们可以使用classnames库来根据条件来动态地加载不同的样式类。

JSx
import React, { useState } from 'react';
import styles from './styles.module.CSS';
import classNames from 'classnames';
const Button = () => {
  const [isLoggedIn, setIsLoggedIn] = useState(false);
  const handleClick = () => {
    setIsLoggedIn(!isLoggedIn);
  }
  const buttonClass = classNames(styles.button, {
    [styles.green]: isLoggedIn,
    [styles.red]: !isLoggedIn
  });
  return (
    <button className={buttonClass} onClick={handleClick}>
      {isLoggedIn ? 'Logout' : 'Login'}
    </button>
  );
}
export default Button;

在上面的代码中，我们首先导入了styles.module.CSS文件和classnames库。然后，我们使用useState钩子来定义isLoggedIn状态，并使用handleClick函数来切换isLoggedIn的值。

接下来，我们使用classnames库的classNames函数来根据不同的条件动态地加载不同的样式类。在这个例子中，我们使用了一个对象字面量来定义不同的样式类。如果isLoggedIn为true，我们将加载styles.green样式类；如果isLoggedIn为false，我们将加载styles.red样式类。

最后，我们在按钮的className属性中使用了buttonClass变量，以加载所需的样式类。这样，根据不同的条件，我们可以动态地改变按钮的样式。

使用create-react-app时，我们可以根据条件来加载不同的CSS样式，以改变组件的外观。我们可以使用内联样式或者CSS模块来实现这一点。

在使用内联样式时，我们可以根据条件动态地设置组件的style属性，从而改变组件的样式。

在使用CSS模块时，我们可以根据条件来定义不同的样式类，并使用classnames库来根据条件动态地加载不同的样式类。

无论是使用内联样式还是CSS模块，create-react-app都为我们提供了强大而灵活的工具来实现条件CSS，从而提供更好的用户体验。