如何为React Styled Components设置可在DOM中识别的名称？

有几种实用的方法可以解决这个问题，让你在DOM中轻松区分不同的Styled Components：

1. 手动设置displayName属性 #

直接给styled组件添加displayName，开发环境下，React DevTools会显示这个名称，同时Styled Components生成的类名也会包含该名称（格式通常为[displayName]-[随机哈希]）：

export const Screen = styled.div({
  display: "flex",
});
// 添加displayName
Screen.displayName = "Screen";

此时DOM中的类名会变成类似Screen-k008qs的形式，既保留哈希避免冲突，又能直观识别组件。

2. 通过attrs添加自定义类名 #

如果你想额外添加一个完全自定义的类名，可以使用attrs方法手动注入，这样DOM元素会同时拥有Styled Components生成的随机类和你自定义的类：

// 直接添加固定自定义类
export const Screen = styled.div.attrs({
  className: "screen-component"
})({
  display: "flex",
});

如果需要兼容外部传入的className属性，避免覆盖，可以这样写：

export const Screen = styled.div.attrs(props => ({
  className: `${props.className || ""} screen-component`
}))({
  display: "flex",
});

这种方式下，DOM中的类会是css-k008qs screen-component，你可以通过自定义类名快速定位组件。

3. 配置Babel插件自动生成带名称的类名 #

通过babel-plugin-styled-components插件可以统一配置类名格式，开发环境下自动将组件名融入生成的类名中，无需手动逐个设置：

在你的Babel配置文件（如babel.config.js或.babelrc）中添加如下配置：

module.exports = {
  plugins: [
    [
      "babel-plugin-styled-components",
      {
        displayName: true, // 开启显示组件名
        fileName: false, // 不包含文件名（可选）
        classNameFormat: "[name]-[hash:base64:5]" // 自定义类名格式
      }
    ]
  ]
};

配置后，所有Styled Components生成的类名都会自动带上组件名称前缀，比如Screen-k008qs，既保证唯一性，又方便识别。

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