修改Ant Design 按钮的样式
2023-07-04 本文已影响0人
云高风轻
1. 前言
- 前几天问到了
Ant Design如何修改按钮的样式,比如背景色或字体颜色等怎么操作- 相比于粗暴的 CSS 样式覆盖（也被叫做
魔改样式），CSS 变量让我们可以更加优雅地自定义组件的样式- css变量基础
- 先来捋一捋
react官方有哪些对 css变量定义的方式
- 在
CSS 文件中设置- 直接通过
style 属性设置- 通过
全局变量进行设置
2. 在 CSS 文件中设置
- 自定义样式
className
<Button className='my-button'/>
2.css文件的设置
.my-button {
--border-radius: 2px;
}
3. 直接通过 style 属性设置
- 直接通过组件的 style 属性，简单粗暴，适合小范围的调整：
<Button style={{
'--border-radius': '2px'
}}/>
4. 通过全局变量进行设置
- 也可以"局部性"地进行调整，只需要把对应的 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;
- CustomButton 组件中使用了
className属性，并设置为 custom-button，- 然后在
CustomButton.css文件中定义了对应的样式规则。
6. 使用内联样式：
- 对特定的按钮进行样式修改，也可以使用内联样式的方式直接在组件中设置样式。
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. 使用自定义主题：
8. 如何移除两个汉字之间的空格
根据 Ant Design设计规范要求，我们会在按钮内(文本按钮和链接按钮除外)只有两个汉字时自动添加空格，如果你不需要这个特性，可以设置 ConfigProvider 的autoInsertSpaceInButton为false
9. 如何避免 300ms 的点击延迟？
- 方案-1 head 中添加
<meta name="viewport" content="width=device-width">
- 方案-2 增加全局样式
html {
touch-action: manipulation;
}
