Styled Components 是一种 CSS-in-JS 库，它提供了一种将样式与组件代码紧密集成的方式。使用 Styled Components 可以方便地定义、传递和重用样式，同时也能够通过 JavaScript 来动态控制样式。

安装

你可以使用 npm 或 pnpm 来安装 Styled Components：

npm install styled-components
# 或者
pnpm add styled-components

创建样式组件

创建样式组件了。Styled Components 使用模板字符串来定义样式。

例如：

import styled from 'styled-components';

const Button = styled.button`
  background-color: blue;
  color: white;
  border: none;
  padding: 8px 16px;
  border-radius: 4px;
`;

在上面的示例中，我们使用 styled.button 方法来创建一个名为 Button 的组件，并在模板字符串中定义了该组件的样式。这里的样式规则与普通的 CSS 规则类似，只不过使用的是 JavaScript 语法。

使用样式组件

像使用普通的 HTML 元素一样来使用 Button 组件了。

例如：

function App() {
  return (
    <div>
      <Button>点击我</Button>
    </div>
  );
}

在上面的示例中，我们将 Button 组件嵌套在一个 div 元素中，并显示出来。

动态样式

除了静态样式之外，Styled Components 还支持使用 JavaScript 来动态控制样式。

例如，我们可以根据 props 属性来决定是否显示某个组件，例如：

import styled from 'styled-components';

const Box = styled.div`
  display: ${props => props.visible ? 'block' : 'none'};
`;

在上面的示例中，我们使用 styled.div 方法来创建一个名为 Box 的组件，并使用 ${props => props.visible ? 'block' : 'none'} 来动态控制该组件的显示方式。

样式继承

有时候，我们需要在多个组件中共享相同的样式。这时，我们可以使用 extend 属性来继承其他组件的样式。例如：

const Button = styled.button`
  background-color: blue;
  color: white;
  border: none;
  padding: 8px 16px;
  border-radius: 4px;
`;

const PrimaryButton = styled(Button)`
  background-color: green;
`;

在上面的示例中，我们使用 styled(Button) 方法来创建一个名为 PrimaryButton 的组件，并继承了 Button 组件的样式。接着，我们修改了 background-color 属性，使其变成绿色。

样式嵌套

在某些情况下，我们需要在一个样式定义中嵌套另一个样式定义。这时，我们可以像普通的 CSS 规则一样使用选择器来实现。

例如：

const Box = styled.div`
  .title {
    font-size: 24px;
    font-weight: bold;
  }
`;

在上面的示例中，我们在 Box 组件的样式定义中嵌套了 .title 的样式定义。

全局样式

有时候，我们需要在整个应用程序中共享某些样式规则。这时，我们可以使用 createGlobalStyle 方法来创建全局样式。

例如：

import { createGlobalStyle } from 'styled-components';

const GlobalStyle = createGlobalStyle`
  body {
    font-size: 16px;
    font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif;
    margin: 0;
    padding: 0;
  }
`;

function App() {
  return (
    <div>
      <GlobalStyle />
      {/* ... */}
    </div>
  );
}

在上面的示例中，我们创建了一个名为 GlobalStyle 的全局样式，并将其作为一个组件使用。在 App 组件中，我们将该组件嵌套在一个 div 元素之前，使得全局样式能够在整个应用程序中生效。

主题样式

有时候，我们需要根据不同的主题来切换样式。这时，我们可以使用 ThemeProvider 组件来传递主题信息，并使用 props.theme 来动态控制样式。例如：

import styled, { ThemeProvider } from 'styled-components';

const Button = styled.button`
  background-color: ${props => props.theme.primaryColor};
  color: white;
  border: none;
  padding: 8px 16px;
  border-radius: 4px;
`;

const theme = {
  primaryColor: 'blue',
};

function App() {
  return (
    <ThemeProvider theme={theme}>
      <Button>点击我</Button>
    </ThemeProvider>
  );
}

在上面的示例中，我们创建了一个名为 Button 的组件，并使用 ${props => props.theme.primaryColor} 来动态获取主题中的颜色值。接着，我们定义了一个名为 theme 的主题对象，并将其传递给 ThemeProvider 组件。

属性别名

有时候，我们需要为某些属性定义别名，以便于代码的复用和维护。这时，我们可以使用 attrs 方法来为属性定义别名。例如：

const Input = styled.input.attrs(props => (
  {
  type: 'text',
  placeholder: props.placeholder || '请输入内容',
}
))`
  background-color: white;
  border: 1px solid gray;
  padding: 8px;
  border-radius: 4px;
`;

在上面的示例中，我们使用 styled.input 方法来创建一个名为 Input 的组件，并使用 attrs 方法为 type 和 placeholder 属性定义别名。

Styled Components 是一种 CSS-in-JS 库，它提供了一种将样式与组件代码紧密集成的方式。使用 Styled Components 可以方便地定义、传递和重用样式，同时也能够通过 JavaScript 来动态控制样式。Styled Components 还支持许多其他的功能，例如样式嵌套、样式继承、动态样式等，可以帮助开发者编写更加清晰、灵活的前端代码。在实际开发中，我们可以根据具体需求来选择是否使用 Styled Components。

有任何问题请留言，我都将一一回复

前军教程网

中小站长与DIV+CSS网页布局开发技术人员的首选CSS学习平台

styled-components使用教程（style scope）

安装