阿西河

所有教程

公众号
🌙
阿西河前端的公众号

我的收藏

    最近访问  (文章)

      教程列表

      抓包专区
      测试专区

      Ant Design 定制主题

      定制主题

      Ant Design 设计规范和技术上支持灵活的样式定制,以满足业务和品牌上多样化的视觉需求,包括但不限于全局样式(主色、圆角、边框)和指定组件的视觉定制。

      https://zos.alipayobjects.com/rmsportal/zTFoszBtDODhXfLAazfSpYbSLSEeytoG.png

      Ant Design 的样式变量

      antd 的样式使用了 Less 作为开发语言,并定义了一系列全局 / 组件的样式变量,你可以根据需求进行相应调整。

      以下是一些最常用的通用变量,所有样式变量可以在 这里 找到。

      @primary-color: #1890ff; // 全局主色
      @link-color: #1890ff; // 链接色
      @success-color: #52c41a; // 成功色
      @warning-color: #faad14; // 警告色
      @error-color: #f5222d; // 错误色
      @font-size-base: 14px; // 主字号
      @heading-color: rgba(0, 0, 0, 0.85); // 标题色
      @text-color: rgba(0, 0, 0, 0.65); // 主文本色
      @text-color-secondary: rgba(0, 0, 0, 0.45); // 次文本色
      @disabled-color: rgba(0, 0, 0, 0.25); // 失效色
      @border-radius-base: 2px; // 组件/浮层圆角
      @border-color-base: #d9d9d9; // 边框色
      @box-shadow-base: 0 3px 6px -4px rgba(0,0,0,.12),0 6px 16px 0 rgba(0,0,0,.08),0 9px 28px 8px rgba(0,0,0,.05); // 浮层阴影
      

      定制方式

      原理上是使用 less 提供的 modifyVars 的方式进行覆盖变量;

      可以在本地运行 https://github.com/ant-design/create-react-app-antd 查看定制效果。

      在 create-react-app 中定制主题

      我们可以引入 craco-less 来帮助加载 less 样式和修改变量。

      首先把 src/App.css 文件修改为 src/App.less,然后修改样式引用为 less 文件。

      /* src/App.js */
      - import './App.css';
      + import './App.less';
      /* src/App.less */
      - @import '~antd/dist/antd.css';
      + @import '~antd/dist/antd.less';
      

      然后安装 craco-less 并修改 craco.config.js 文件如下。

      $ yarn add craco-less
      
      const CracoLessPlugin = require('craco-less');
      
      module.exports = {
        plugins: [
          {
            plugin: CracoLessPlugin,
            options: {
              lessLoaderOptions: {
                lessOptions: {
                  modifyVars: { '@primary-color': '#1DA57A' },
                  javascriptEnabled: true,
                },
              },
            },
          },
        ],
      };
      

      这里利用了 less-loader 的 modifyVars 来进行主题配置,变量和其他配置方式可以参考 配置主题 文档。修改后重启 yarn start,如果看到一个绿色的按钮就说明配置成功了。

      antd 内建了深色主题和紧凑主题,你可以参照 使用暗色主题和紧凑主题 进行接入。

      同样,你可以使用 react-scripts-rewired 和 customize-cra 来自定义 create-react-app 的 webpack 配置。

      卖前端学习教程

      只需几十元,就能买到培训班的内部教程!开启高薪之路!

      零基础小白阿里P7的教程都有!

      同时长期收购所有培训班的前端教程

      目录
      目录