如何在螞蟻設計上切換單選按鈕顏色 - 反應？

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