I am using a library called Ant Design that uses a color theme throughout the interface but the radio button component does not have the property to change it easily, my goal is to switch the color of the radio button when pressing the trash button.
from this -> trash button not selected to this trash button selected
the method I use here is to change the component's css with !important as follows:
.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;
}
but I can't go back this action
my react component is as follows:
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;
and the shopSketch Component is:
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;
I tried to change the style directly in the radio button but it affects all the elements, conditionally import the css but I can't revert the action I ran out of ideas, I know I'm a bit new but I would really appreciate if you could give me any kind of help Thanks in advance.
finally, I was able to come up with a small solution
On example add SelectedShop as argument:
<ShopSketch
name={name}
key={index}
deleteShop={deleteShop}
selectedShop={selectedShop}
/>
On ShopSketch add selectedShop and the style to 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' }
}
>
On css:
.shop-delete:hover {
color: #ff4d4f;
}