如何在styled-components中设置静态自定义类名？

默认情况下，styled-components会为组件生成随机类名挂载样式。当你手动添加className="custom-class"时，只是给组件追加了一个类名，并不会将原有样式转移到自定义类上。要实现让自定义类承载目标样式，可通过以下两种方式修改组件定义：

方法一：结合attrs设置固定类名并绑定样式 #

在定义styled组件时，通过attrs方法给组件设置默认的自定义类名，同时将样式直接绑定到该类上：

// Title.js
import styled from 'styled-components';

const Title = styled.h1.attrs(() => ({
  className: 'custom-class'
}))`
  .custom-class {
    font-size: 1.5em;
    text-align: center;
    color: palevioletred;
  }
`;

export default Title;

此时组件渲染后的DOM结构为：

<h1 class="custom-class">Hello World, this is my first styled component!</h1>

所有目标样式都会挂载在.custom-class上，不再生成随机类名。

方法二：通过类选择器绑定样式（需手动传递className） #

如果需要保留动态传递className的灵活性，可以在组件样式中用&.custom-class选择器绑定样式，使用时手动传入className：

// Title.js
import styled from 'styled-components';

const Title = styled.h1`
  &.custom-class {
    font-size: 1.5em;
    text-align: center;
    color: palevioletred;
  }
`;

export default Title;

使用组件时：

<Title className="custom-class">Hello World, this is my first styled component!</Title>

这种方式下，只有当传入custom-class时样式才会生效，适合需要根据不同类名切换样式的场景。

内容的提问来源于stack exchange，提问作者Happy1234