antd button 组件点击后修改按钮边框颜色

你可以使用 `:active` 伪类来实现点击后修改按钮边框颜色的效果。示例代码如下：

.ant-btn:active {
  border-color: red;
}

这段代码会在按钮被点击时将边框颜色修改为红色。你可以根据需要自行修改颜色值。

相关问题

antd button 不使用默认颜色

如果你想要使用 antd button 组件但不想使用默认颜色，可以使用 `style` 和 `className` 属性来自定义样式。

例如，如果你想要将按钮的背景颜色更改为红色，可以添加以下代码：

import { Button } from 'antd';
import './custom-button.css';

function CustomButton() {
  return (
    <Button className="custom-button" style={{ backgroundColor: 'red' }}>
      Click me
    </Button>
  );
}

然后在 `custom-button.css` 文件中添加以下代码：

.custom-button {
  color: white;
  border-color: red;
}

这会将按钮的文字颜色更改为白色，并将边框颜色设置为红色。这样就可以使用自定义颜色的 antd 按钮了。

antd改变边框颜色

在Ant Design（简称AntD）库中，如果你想改变组件的边框颜色，你可以通过CSS样式或者直接设置`border-color`属性来实现。以下是一些示例：

1. **通过CSS**：
如果你想要全局更改所有使用了AntD组件的边框颜色，可以在主题配置文件(`theme.js`)中修改`primaryColor`、`borderColor`等变量。例如：

   import { createTheme } from 'antd';
   const theme = createTheme({
     borderColor: '#007aff', // 修改边框颜色为蓝色
   });

然后应用这个主题到应用程序上。

2. **通过props**：
对于单个组件，可以直接在渲染时传递`style`属性，例如`<Button style={{ borderColor: 'red' }}>按钮</Button>`，将边框颜色设为红色。

3. **内联样式**：
使用HTML元素的`style`属性，如 `<div style="border-color: green;">内容</div>`，将边框颜色改为绿色。