zat-design-css v1.1.47

快速上手

安装

npm 或 yarn 安装

# npm
$ npm install zat-design-css --save

# yarn
$ yarn add zat-design-css

zat-design-css 的样式变量

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

以下是一些最常用的通用变量，基本上可以覆盖到中台大部分场景。

$zaui-brand: '#00bc70'; // 品牌色
$zaui-link: '#00bc70'; // 链接色
$zaui-text: '#343434'; // 主文本色
$zaui-text-weak: '#616161'; // 次文本色
$zaui-disabled-text: '#333333'; // disabled文字颜色
$zaui-success: '#00ae4d'; // 成功、正确色
$zaui-warning: '#ec9131'; // 警告、需注意类型提示
$zaui-danger: '#ff5050'; // 失败、错误色
$zaui-size: 1; // 密度
$zaui-font-size: '14px'; // 页面正文主字号
$zaui-border-radius: '2px'; // 一般圆角
$zaui-height-card: '32px'; // 模块，卡片间距
$zaui-height-border: '12px'; // 控件间距（主要指表单）

静态定制主题

antd 场景

// antd组件采用
@import '~zat-design-css/dist/library/antd.less';
// iview组件采用
@import '~zat-design-css/dist/library/iview.less';
// 自定义主题包，用于覆盖上面定义的变量
@import 'your-theme-file.less';

tip: 所有页面，模块，组件的样式需要跟随主题包调整的都需要引用自定义主题包中的变量，达到修改一处配置全局生效。

注意，这种方式已经载入了所有组件的样式，不需要也无法和按需加载插件 babel-plugin-import 的 style 属性一起使用。

umi 场景

在 src/global.less 中引入以下文件，

其它散列的页面，模块，组件使用固定值样式值的地方，需要使用动态值的地方都需引入该文件进行调整。

@import '~zat-design-css/dist/library/antd.less';

动态定制主题

调用配置工具（用于开发演示环境）

import React from 'react';
import { ThemeTools } from 'zat-design-css';

export default () => <ThemeTools color="00bc70" size={24} />;

正常开发环境调用

1. 主题配置函数（IE11 及以下不支持，部分 edge 支持）, antd 动态切换主题需要版本 antd: "^4.17.0-alpha.5" 或以上版本 (项目使用本方案时 antd 的版本必须满足该条件)

import { setThemesProperty } from 'zat-design-css';

setThemesProperty({
  'zaui-brand': '#00bc70', // 品牌色
});

ConfigProvider.config({
  theme: {
    primaryColor: '#00bc70', // 品牌色
  },
});

2. umi 如果配置了 theme 中的主题色，会导致主题颜色部分丢失, 如需使用动态颜色调整可以直接使用方法 1

3. 如果 umi 项目中有引用插件@umijs/preset-react 并且再配置中配置了 antd 的属性，需要移除如设置 antd: false，否则影响 css 加载的顺序导致 antd 组件样式覆盖了动态化后的样式，导致界面动态失效

4. umi 使用 ant-design-pro 中@ant-design/pro-table, 启动报错时需要再配置里添加，详情问题见 github

export default defineConfig({
  lessLoader: {
    modifyVars: {
      'root-entry-name': 'default'
    }
  },
}