如何在蚂蚁设计上切换单选按钮颜色 - 反应？

Question

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.

Answer 1

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;
}