antd自定义原色

Question

我正在使用 antd 和 create-react-app 来创建我的应用程序。

我按照这个例子：https://github.com/ant-design/antd-init/tree/master/examples/customize-antd-theme

Here they have given example using webconfig. When i tried to replacete the same i m unable to change the primary color. Can anybody tell how to do the same in create-react-app ?

Answer 1

第一种方式手动弹出create-react-app

您需要使用 npm run eject 弹出才能控制 webpack.config.js

然后你可以使用LESS的modifyvars来改变原色

正如指南所解释的那样

这里是英文版：

https://ant.design/docs/react/customize-theme

https://github.com/webpack-contrib/less-loader#less-options

第二。使用 react-app-rewire-less

导入并修改config-overrides.js，如下所示。

$ yarn add react-app-rewire-less --dev
  const { injectBabelPlugin } = require('react-app-rewired');
+ const rewireLess = require('react-app-rewire-less');

  module.exports = function override(config, env) {
-   config = injectBabelPlugin(['import', { libraryName: 'antd', style: 'css' }], config);
+   config = injectBabelPlugin(['import', { libraryName: 'antd', style: true }], config);  // change importing css to less
+   config = rewireLess.withLoaderOptions({
+     modifyVars: { "@primary-color": "#1DA57A" },
+   })(config, env);
    return config;
  };

在此处查看更多信息：https://ant.design/docs/react/use-with-create-react-app

Answer 2

如果你不想使用 react-scripts 弹出您可以简单地创建一个 less 文件（假设 main.less ），导入 antd.less 并在此 main.less 文件中替换 ant design 的默认变量。

使用 lessc (npm i -g less) 编译这个 less 文件。

lessc "main.less antd.css" --js --js 用于 less 中的内联 javascript 现在只需在您的应用程序中包含这些已编译的 css。

查看 https://medium.com/@aksteps/782c53cbc03b 以获得完整的演练

antd自定义原色

antd custom primary color

ecmascript-6

webpack

create-react-app

antd

第一种方式手动弹出create-react-app

第二。使用 react-app-rewire-less