antd pro 修改全局样式

tankpanv

已于 2022-05-24 00:25:39 修改

阅读量4.2k

点赞数 4

分类专栏： react 文章标签： react.js javascript 前端

于 2022-02-21 16:31:20 首次发布

本文链接：https://blog.csdn.net/tankpanv/article/details/123050197

版权

react 专栏收录该内容

17 篇文章 0 订阅

订阅专栏

一、在哪里修改样式

官网给的结论是在config.ts 的theme 配置可以修改

但是试了发现一部分参数可以修改，比如

theme: {
   // 'primary-color': defaultSettings.primaryColor,
    "border-radius-base": "4px",// 组件/浮层圆角
    "border-radius": "4px",
  },

一部分不可以，比如

primary-color": "#1DA57A"

另外试了下在global.less 修改是可以的

需要注意的是，如果通过config.ts 或者.umijs.ts 按需引入antd样式的时候，比如下面的例子，如果加上style: 'css' 就会导致自定义全局样式不生效的情况

 extraBabelPlugins: [
    [
      'import',
      {
        libraryName: 'antd',
        libraryDirectory: 'es',
        // style: 'css', // `style: true` 会加载 less 文件 如果加了该选项，则可能会导致自定义全局样式不生效
      },
    ],

extraBabelPlugins

.ant-layout {
  min-height: 100vh;
  background: #ffffff;
}

.ant-layout-content .ant-pro-basicLayout-content .ant-pro-basicLayout-has-header {
  background: #ffffff;
}

二、如何修改样式