styled-components构建时是否支持导出语义化className？

可以实现你要的效果，主要通过官方配套的babel插件、可选自定义类名生成逻辑两种方式实现，具体操作如下：

基础方案：保留组件名+哈希后缀（推荐） #

这种方案不会引入样式冲突风险，同时可以在类名里清晰看到对应的组件名：

• 第一步：安装官方babel插件

npm install --save-dev babel-plugin-styled-components

• 第二步：修改你的babel配置文件（.babelrc、babel.config.js 等），新增插件配置：

{
  "plugins": [
    ["styled-components", {
      "displayName": true,
      "fileName": false
    }]
  ]
}

配置后生成的类名格式为 ComponentName-随机哈希，比如你定义的ComponentName组件，生成的类名会是类似class="ComponentName-btf79"的格式。

极端方案：仅保留组件名作为类名（不推荐生产环境使用） #

如果你完全不需要哈希，仅要组件名作为类名，可以通过StyleSheetManager自定义类名生成逻辑实现，注意不同文件的同名组件会出现样式覆盖问题，生产环境禁止使用：

import { StyleSheetManager } from 'styled-components';

// 自定义类名生成规则，直接返回组件名
const customFormatter = (displayName) => displayName;

function RootApp() {
  return (
    <StyleSheetManager classNameFormatter={customFormatter}>
      {/* 你的整个应用代码 */}
    </StyleSheetManager>
  );
}

配置后你定义的ComponentName组件输出的类名就是class="ComponentName"。

注意事项 #

• 生产环境默认会关闭displayName配置来减少打包体积，需要手动开启才能在生产环境的类名里看到组件名
• 完全去掉哈希的方案仅适合测试、内部工具等特殊场景，生产环境使用必然会出现样式冲突问题

内容的提问来源于stack exchange，提问作者Егор Карпов