使用ConfigProvider自定义主题时head标签出现重复样式问题求助

云原生阿岚

2026-6-21

修复Ant Design ConfigProvider导致Skeleton组件重复生成样式的问题

问题描述

使用ConfigProvider自定义主题设置新字体族后，构建完成发现Skeleton组件（含Loading状态）会在<head>标签中生成两份样式。

代码示例：

const designSystem = {
  "token": {
    "fontFamily": "Archivo, Exo",
  }
}

<ConfigProvider theme={designSystem}>
 <div className="main-container">
    <div className="card-top-container">
        <Skeleton.Image active={true} />
    </div>
    <div className="card-main-container">
        <Space size={16} direction="vertical">
            <Skeleton.Input active={true} block={true} />
            <Skeleton.Input active={true} block={true} />
        </Space>
    </div>
</ConfigProvider>

解决方案

统一组件导入方式
避免混合使用完整导入和按需导入两种方式，防止重复引入组件样式。比如统一使用完整导入：
```
import { ConfigProvider, Skeleton, Space } from 'antd';
```
若使用按需导入，确保通过babel-plugin-import等工具配置统一的规则。

配置StyleProvider优化样式注入
通过ConfigProvider的styleProvider参数启用样式缓存、提升优先级，避免重复生成样式：

<ConfigProvider 
  theme={designSystem}
  styleProvider={{
    hashPriority: 'high',
    cache: true,
  }}
>
  {/* 应用组件内容 */}
</ConfigProvider>

确保单一ConfigProvider实例
检查应用中是否存在多个ConfigProvider嵌套或多处实例化的情况，只保留根级的一个ConfigProvider，避免主题样式被重复应用。
升级Ant Design版本
该问题可能是特定版本的已知Bug，升级到最新稳定版的Ant Design，官方大概率已修复组件样式重复生成的问题。