如何在ant design - react上切换单选按钮颜色？
如何在ant design - react上切换单选按钮颜色？
提问于 2021-11-08 17:51:20
我正在使用一个名为Ant Design的库，它在整个界面中使用颜色主题，但单选按钮组件没有轻松更改它的属性，我的目标是在按下垃圾箱按钮时切换单选按钮的颜色。
从这个-> trash button not selected到这个trash button selected
我在这里使用的方法是使用!important更改组件的css，如下所示：
.ant-radio-button-checked,
.ant-radio-button-inner,
.ant-radio-button-inner,
.ant-radio-button-wrapper-checked,
.ant-radio-button-input:focus,
.ant-radio-button-inner {
border-color: #ff4d4f !important;
color: #ff4d4f !important;
}
.ant-radio:hover,
.ant-radio-button-wrapper:hover {
color: #ff4d4f;
}但我不能回到这个动作
我的react组件如下：
import { React, useState } from 'react';
import { Radio, Button } from 'antd';
import ShopSketch from './ShopSketch';
const Example = () => {
const [selectedShop, setSelectedShop] = useState(false);
const [deleteShop, setDeleteShop] = useState(false);
const [shopNames, setShopNames] = useState(['shop1', 'shop2', 'shop3']);
return (
<div>
<Button danger onClick={() => setDeleteShop(!deleteShop)}>
<ion-icon
style={{ color: 'red', fontSize: '18px' }}
name={deleteShop ? 'close-outline' : 'trash-outline'}
></ion-icon>
</Button>
<Radio.Group
className="shops"
onChange={(e) => {
const selected = e.target.value;
setSelectedShop(selected);
}}
>
{shopNames.map((name, index) => (
<ShopSketch name={name} key={index} deleteShop={deleteShop} />
))}
</Radio.Group>
</div>
);
};
export default Example;shopSketch组件是：
import { Radio } from 'antd';
import { React } from 'react';
const ShopSketch = ({ name, deleteShop }) => {
return (
<Radio.Button
value={name}
style={{ height: '200px', borderWidth: '2.5px' }}
>
<p>{name}</p>
<ion-icon name="wallet-outline" size="big"></ion-icon>
</Radio.Button>
);
};
export default ShopSketch;我试图直接在单选按钮中更改样式，但它会影响所有元素，有条件地导入css，但我无法恢复我没有想法的动作，我知道我是个新手，但如果你能提前给我任何帮助，我将不胜感激。
Stack Overflow用户
发布于 2021-11-13 20:10:08
最后，我想出了一个小的解决方案。
在示例中添加SelectedShop作为参数：
<ShopSketch
name={name}
key={index}
deleteShop={deleteShop}
selectedShop={selectedShop}
/>在ShopSketch上，将selectedShop和样式添加到radio.button：
const ShopSketch = ({ name, selectedShop, deleteShop }) =>
<Radio.Button
value={name}
className={`shop ${deleteShop ? 'shop-delete' : ''}`}
style={
selectedShop === name && deleteShop
? {
border: '2.5px solid #ff4d4f',
color: '#ff4d4f',
}
: { borderWidth: '2.5px' }
}
>在css上：
.shop-delete:hover {
color: #ff4d4f;
}页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/69887842
复制相关文章
相似问题
腾讯云开发者
