1. 前言

1. 前几天问到了 Ant Design 如何修改按钮的样式,比如背景色或字体颜色等怎么操作
2. 相比于粗暴的 CSS 样式覆盖（也被叫做魔改样式），CSS 变量让我们可以更加优雅地自定义组件的样式
3. css变量基础

---

• 先来捋一捋react官方有哪些对 css变量定义的方式

1. 在 CSS 文件中设置
2. 直接通过 style 属性设置
3. 通过全局变量进行设置

---

2. 在 CSS 文件中设置

1. 自定义样式className

<Button className='my-button'/>

2.css文件的设置

.my-button {
  --border-radius: 2px;
}

---

3. 直接通过 style 属性设置

1. 直接通过组件的 style 属性，简单粗暴，适合小范围的调整：

<Button style={{
  '--border-radius': '2px'
}}/>

---

4. 通过全局变量进行设置

1. 也可以"局部性"地进行调整，只需要把对应的 CSS 变量添加到对应的父级节点上

:root:root {
  --adm-button-border-radius: 2px;
}

---

---

• 具体 修改Ant Design 按钮的样式

5. 使用自定义类名

import { Button } from 'antd';
import 'antd/dist/antd.css';
import './CustomButton.css'; // 导入自定义样式文件

const CustomButton = () => {
  return <Button className="custom-button">Custom Button</Button>;
};

export default CustomButton;

1. CustomButton 组件中使用了 className 属性，并设置为 custom-button，
2. 然后在 CustomButton.css文件中定义了对应的样式规则。

---

6. 使用内联样式：

1. 对特定的按钮进行样式修改，也可以使用内联样式的方式直接在组件中设置样式。

import { Button } from 'antd';

const CustomButton = () => {
  const buttonStyle = {
    backgroundColor: 'red',
    color: 'white',
    border: 'none',
    // 更多样式属性...
  };

  return <Button style={buttonStyle}>Custom Button</Button>;
};

export default CustomButton;

---

7. 使用自定义主题：

1. 主题定制

---

8. 如何移除两个汉字之间的空格

1. 根据 Ant Design设计规范要求，我们会在按钮内(文本按钮和链接按钮除外)只有两个汉字时自动添加空格，如果你不需要这个特性，可以设置 ConfigProvider 的 autoInsertSpaceInButton 为 false

---

9. 如何避免 300ms 的点击延迟？

1. 方案-1 head 中添加

<meta name="viewport" content="width=device-width">

2. 方案-2 增加全局样式

html {
  touch-action: manipulation;
}

---

参考资料

1. react FAQ
2. react css变量

---

初心

我所有的文章都只是基于入门，初步的了解；是自己的知识体系梳理,如有错误,道友们一起沟通交流;

如果能帮助到有缘人,非常的荣幸,一切为了部落的崛起;

共勉