Estoy usando una biblioteca llamada Ant Design que usa un tema de color en toda la interfaz, pero el componente del botón de opción no tiene la propiedad de cambiarlo fácilmente, mi objetivo es cambiar el color del botón de opción al presionar el botón de la papelera.

de este -> botón de papelera no seleccionado a este botón de papelera seleccionado

el método que uso aquí es cambiar el css del componente con !important de la siguiente manera:

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

pero no puedo volver atrás esta acción

mi componente de reacción es el siguiente:

 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;

y el componente shopSketch es:

 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;

Intenté cambiar el estilo directamente en el botón de radio pero afecta a todos los elementos, importo condicionalmente el css pero no puedo revertir la acción Me quedé sin ideas, sé que soy un poco nuevo pero realmente agradecería si me podrian dar algun tipo de ayuda gracias de antemano.