蚂蚁设计按钮颜色更新

Question

我正在尝试更新我的REACT应用程序中此链接中提到的蚂蚁设计收音机的单选按钮颜色

https://ant.design/components/radio/#components-radio-demo-radiobutton-solid

并尝试使用本文中的建议来更新颜色

https://stackoverflow.com/questions/62609951/how-to-change-radio-button-color-in-ant-design

但是我的颜色没有更新。我不确定我在这里没有做错什么。 另外，它是一个REACT项目，而我的package.json对“ antd”具有依赖性：“ ^ 4.5.0” 并且antd.css的导入像这样在app.tsx中存在

// Global styles
import "antd/dist/antd.css";

这是我在项目的一个组件文件中包含的代码。

文件名：MyRadio.tsx

import { Radio } from "antd";
import styles from "./mystyles.module.scss";



  return (
        <Radio.Group
          className={styles.toggle}
        >
          <Radio id="RDC" value="C">
            C
          </Radio>
          <Radio id="RDI" value="I">
            I
          </Radio>
        </Radio.Group>
      );

这是mystyles.module.scss的样子

.toggle {
  width: 244px;
  background: #ffffff;
  border: 1px solid #d9d9d9;
  box-sizing: border-box;

  display: flex;
  align-items: center;
  float: left;
 
}
/*  Followed suggestion from other post but didnt see colors updating, when I un-comment the following code
.ant-radio-checked .ant-radio-inner {
  border-color: red !important ;
}

.ant-radio-checked .ant-radio-inner:after {
  background-color: red;
}

.ant-radio:hover .ant-radio-inner {
  border-color: red;
}
*/

-更新1

Answer 1

您需要重写以下类。它应该工作。仅当css被现有类覆盖时，才使用！important。 您需要导入“ antd / dist / antd.css”；在控制台中获取它们，然后覆盖CSS

https://codesandbox.io/s/nameless-dream-4ojr4

.ant-radio-inner:after {
  background: red !important;
}

.ant-radio-checked .ant-radio-inner,
.ant-radio:hover .ant-radio-inner,
.ant-radio-wrapper:hover,
.ant-radio-input:focus .ant-radio-inner {
  border-color: red !important;
}

编辑-包含了codeandbox链接和悬停CSS

Answer 2

我无法写评论（信誉太低），因此我将写一个“答案”。您可以尝试更改蚂蚁设计https://ant.design/docs/react/customize-theme的主题（此默认蓝色是主要颜色）。但是，它需要进行一些更改，并且新的颜色将在全球范围内应用，因此对于现有的大型项目来说不太好。