antd button 组件点击后修改按钮边框颜色
时间: 2023-09-04 08:08:35 浏览: 87
你可以使用 `:active` 伪类来实现点击后修改按钮边框颜色的效果。示例代码如下:
```css
.ant-btn:active {
border-color: red;
}
```
这段代码会在按钮被点击时将边框颜色修改为红色。你可以根据需要自行修改颜色值。
相关问题
eact Antd Table 组件 修改tr的边框颜色
您可以通过自定义CSS来修改Antd Table组件中tr的边框颜色。以下是示例代码:
```css
.ant-table-tbody > tr.ant-table-row:hover > td,
.ant-table-tbody > tr.ant-table-row-selected:hover > td,
.ant-table-tbody > tr:hover > td {
border: 1px solid #1890ff; /* 修改边框颜色为蓝色 */
}
```
您可以将上述CSS代码添加到您的项目中的样式文件中,并根据需要进行修改。当鼠标悬停在tr上时,边框颜色将更改为蓝色。
antd 中button 点击后颜色改变
你可以通过设置 Button 的属性 `style` 或 `className` 来改变 Button 点击后的样式。以下是一些示例代码:
```jsx
import React, { useState } from 'react';
import { Button } from 'antd';
function MyButton() {
const [clicked, setClicked] = useState(false);
const handleClick = () => {
setClicked(!clicked);
};
return (
<Button
style={{ backgroundColor: clicked ? 'red' : 'green' }}
onClick={handleClick}
>
{clicked ? 'Clicked' : 'Click me'}
</Button>
);
}
```
在上述代码中,我们使用了 `useState` hook 来保存 Button 是否被点击的状态。当 Button 被点击时,我们通过 `setClicked` 函数来更新 `clicked` 的值,然后根据 `clicked` 的值来设置 Button 的背景颜色。
你还可以使用自定义 CSS 类来设置 Button 的样式。例如:
```jsx
<Button className={clicked ? 'clicked' : 'unclicked'} onClick={handleClick}>
{clicked ? 'Clicked' : 'Click me'}
</Button>
// CSS
.clicked {
background-color: red;
}
.unclicked {
background-color: green;
}
```
以上是两种常见的方法,你可以根据自己的需要来选择。