CSS 使用styled-components添加两个类（active类）

在本文中，我们将介绍如何使用styled-components库在CSS中添加两个类，其中一个是active类。

阅读更多：https://sotoolbox.com/tag/css target="_blank" rel="nofollow">CSS 教程

什么是styled-components？

styled-components是一个流行的https://sotoolbox.com/tag/css target="_blank" rel="nofollow">CSS-in-JS库，用于在React应用程序中编写样式。它允许我们将CSS样式直接写在组件文件中，以组件的方式管理和引用样式。

使用styled-components创建组件并添加类

首先，我们需要在项目中安装styled-components。可以使用npm或者yarn命令来安装：

npm install styled-components

或者

yarn add styled-components

一旦安装完成，我们可以开始创建一个使用styled-components的组件，并添加两个类，其中一个是active类。

首先，我们导入styled-components：

import styled from 'styled-components';

然后我们定义一个React组件并使用styled-components创建一个样式化的组件：

const Button = styled.button`
  /* 添加你的样式 */
`;

export default Button;

在上面的代码中，我们创建了一个Button组件，并将这个组件样式化了。我们可以在backticks（反引号字符串）内添加我们的CSS样式。

现在，我们来添加active类。在styled-components中，我们可以轻松地使用props来根据组件的状态添加类。

我们可以使用props的值来动态地添加active类，并根据需要更改样式。例如，当我们点击Button组件时，我们可以将其状态设置为active，并应用不同的样式。

const Button = styled.button`
  /* 添加你的样式 */

  &.active {
    /* 添加active类的样式 */
  }
`;

export default Button;

在上面的代码中，我们通过&.active选择器为Button组件添加了.active类，并在此类下编写了我们期望的样式。注意，我们在.active类名前面添加了&符号，这是styled-components中引用同一组件的一种方式。

现在，我们可以在使用Button组件的地方通过设置props的值来添加或移除active类。

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

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

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

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

export default App;

在上面的代码中，我们创建了一个App组件，并使用useState来创建了一个isActive状态和一个handleClick函数。当我们点击按钮时，handleClick函数会切换isActive状态的值。

在Button组件中，我们使用了isActive状态来判断是否添加active类。如果isActive为true，则添加.active类，否则不添加。