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

Question

我正在使用一个名为 Ant Design 的库，它在整个界面中使用颜色主题，但单选按钮组件没有轻松更改它的属性，我的目标是在按下垃圾箱按钮时切换单选按钮的颜色。

从这个 ->垃圾按钮没有被选中到这个垃圾按钮被选中

我在这里使用的方法是使用 !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;
}

但我不能回去这个动作

我的反应组件如下：

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，但我无法恢复操作我没有想法，我知道我有点新，但我真的很感激你可以给我任何形式的帮助 提前致谢。

Answer 1

最后，我想出了一个小解决方案

例如添加 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;
}