Ant-Design自定义样式

(一） 使用Ant-design

1.什么是Ant Design?

antd 是蚂蚁金服开源的 React UI 组件库，主要用于研发企业级中后台产品，相当于Vue 版本的 Element UI

2.Ant Design特点

🌈 提炼自企业级中后台产品的交互语言和视觉风格。
📦 开箱即用的高质量 React 组件。
🛡 使用 TypeScript 开发，提供完整的类型定义文件。
⚙ 全链路开发和设计工具体系(业务战略-用户场景-设计目标-交互体验-用户流程-预期效率等全方面考虑和分析)。
🌍 数十个国际化语言支持。
🎨 深入每个细节的主题定制能力。

3.Ant Design兼容性

antd@2.0 之后不再支持 IE8。
antd@4.0 之后不再支持 React 15 和 IE9/10。

4.Ant Design使用

npm install antd --save
然后打开官方文档抄
官方文档地址: Ant-Design

import React from 'react';
import { DownloadOutlined } from '@ant-design/icons';
import { Button, Radio, Space, Divider } from 'antd';

function App() {
  return (
    <>
      <Radio.Group value="large">
        <Radio.Button value="large">Large</Radio.Button>
        <Radio.Button value="default">Default</Radio.Button>
        <Radio.Button value="small">Small</Radio.Button>
      </Radio.Group>
      <Divider orientation="left" plain>
        Preview
      </Divider>
      <Space direction="vertical">
        <Space wrap>
          <Button type="primary">
            Primary
          </Button>
          <Button>Default</Button>
          <Button type="dashed">
            Dashed
          </Button>
        </Space>
        <Button type="link">
          Link
        </Button>
        <Space wrap>
          <Button type="primary" icon={<DownloadOutlined />}/>
          <Button type="primary" shape="circle" icon={<DownloadOutlined />} />
          <Button type="primary" shape="round" icon={<DownloadOutlined />}/>
          <Button type="primary" shape="round" icon={<DownloadOutlined />}>
            Download
          </Button>
          <Button type="primary" icon={<DownloadOutlined />}>
            Download
          </Button>
        </Space>
      </Space>
    </>
  );
};
export default App;

根据官网抄的.png

如何使用定制的主题呢

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

import React from 'react';
import { DownloadOutlined } from '@ant-design/icons';
import { Button, Radio, Space, Divider, ConfigProvider } from 'antd';

function App() {
  return (
    <>
    <ConfigProvider
    theme={{
      token: {
        colorPrimary: '#00b96b',
      },
    }}
  >
      <Radio.Group value="large">
        <Radio.Button value="large">Large</Radio.Button>
        <Radio.Button value="default">Default</Radio.Button>
        <Radio.Button value="small">Small</Radio.Button>
      </Radio.Group>
      <Divider orientation="left" plain>
        Preview
      </Divider>
      <Space direction="vertical">
        <Space wrap>
          <Button type="primary">
            Primary
          </Button>
          <Button>Default</Button>
          <Button type="dashed">
            Dashed
          </Button>
        </Space>
        <Button type="link">
          Link
        </Button>
        <Space wrap>
          <Button type="primary" icon={<DownloadOutlined />}/>
          <Button type="primary" shape="circle" icon={<DownloadOutlined />} />
          <Button type="primary" shape="round" icon={<DownloadOutlined />}/>
          <Button type="primary" shape="round" icon={<DownloadOutlined />}>
            Download
          </Button>
          <Button type="primary" icon={<DownloadOutlined />}>
            Download
          </Button>
        </Space>
      </Space>
      </ConfigProvider>
    </>
  );
};

export default App;

将primary的样色修改为绿色.png

修改组件变量 (Component Token)不影响其他组件的primary的颜色为官方给的颜色

import React from 'react';
import { Button, Radio, Space, ConfigProvider } from 'antd';

function App() {
  return (
    <>
     <ConfigProvider
    theme={{
      components: {
        Radio: {
          colorPrimary: '#00b96b',
        },
      },
    }}
  >
      <Radio.Group value="large">
        <Radio.Button value="large">Large</Radio.Button>
        <Radio.Button value="default">Default</Radio.Button>
        <Radio.Button value="small">Small</Radio.Button>
      </Radio.Group>
      <Space direction="vertical">
        <Space wrap>
          <Button type="primary">
            Primary
          </Button>
          <Button>Default</Button>
          <Button type="dashed">
            Dashed
          </Button>
        </Space>
        <Button type="link">
          Link
        </Button>
      </Space>
      </ConfigProvider>
    </>
  );
};

export default App;

image.png
其实还可以通过webpack修改，但是我是一个webpack深度恐惧者，从来没有配置成功过，哈哈，我只知道通过npx create的react-app默认是不显示webpack配置的，可以通过npm run eject可以将webpack配置显示

//终端运行命令
npm run eject

bye~