如何修改antd classname 前缀 ant-prefix

最新推荐文章于 2023-09-27 17:19:54 发布

A-wliang

最新推荐文章于 2023-09-27 17:19:54 发布

阅读量2.5k

点赞数 1

分类专栏：组件库文章标签：前端框架 reactjs

本文链接：https://blog.youkuaiyun.com/qq_39544148/article/details/127185088

版权

组件库专栏收录该内容

1 篇文章

订阅专栏

本文介绍如何在Create React App项目中定制Ant Design的主题颜色，并通过ConfigProvider全局配置组件样式。涉及修改Webpack配置、安装craco-less插件及使用ConfigProvider。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

以下修改方法以create-react-app创建的项目中为例子

1.修改webpack配置

参考 link 暴露出webpack配置

2.修改配置文件

在package.json同级目录下新增craco.config.js文件，文件内容如下：

const CracoLessPlugin = require('craco-less');

module.exports = {
  plugins: [
    {
      plugin: CracoLessPlugin,
      options: {
        lessLoaderOptions: {
          lessOptions: {
            modifyVars: { '@primary-color': '#1DA57A' },
            javascriptEnabled: true,
          },
        },
      },
    },
  ],
};

安装 craco-less

yarn add craco-less

如果是没有用CRA的话，可以直接使用less-loader进行替换

3.在组件最外层新增ConfigProvider

import { Suspense } from 'react';
import { BrowserRouter } from 'react-router-dom';
import RouteView from './routes';
import { Button, ConfigProvider } from 'antd';
import './App.less';

function App() {
  return (
    <Suspense fallback={<div>loading...</div>}>
      <div className="">
        <ConfigProvider prefixCls="xxxx">
          <Button type={'primary'}>点击</Button>
        </ConfigProvider>
      </div>
    </Suspense>
  );
}

export default App;