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

【问题标题】：How can i switch Radio Button color on ant design - react?我如何在蚂蚁设计上切换单选按钮颜色 - 反应？
【发布时间】：2021-12-21 13:13:22
【问题描述】：

我正在使用一个名为 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;
}

但我无法返回此操作

我的反应组件如下：

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 但我无法恢复操作我的想法用完了，我知道我有点新，但如果你能给我任何帮助，我将不胜感激提前致谢。

【问题讨论】：

如果可以改变图标的颜色，为什么还要改变单选按钮的颜色呢？你能提供minimal reproducible example吗？
感谢 Andrey 的推荐，我已经制作了最少的可重现代码，并且及时找到了一种小解决方案。我不仅可以更改图标的颜色，因为我想更改按钮边框的颜色，以便删除业务的动作更明显（这是一个重要动作）并且默认情况下ant design的radioButton有我也想改变的悬停颜色

标签： javascript css reactjs design-patterns antd

【解决方案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;
}

【讨论】：