蚂蚁设计按钮颜色更新 [英] Ant design button color update

问题描述

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

解决方案

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

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

  .ant-radio-inner:之后{背景:红色！重要；}.ant-radio-checked .ant-radio-inner，.ant-radio:悬停.ant-radio-inner，.ant-radio-wrapper:悬停，.ant-radio-input:focus .ant-radio-inner {边框颜色:红色！重要；} 

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

I am trying to update radio button colors of an ant design radio mentioned in this link in my REACT app

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

and tried using the suggestion in this post to update the colors

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

but my colors are not updating. I am not sure what I am not doing incorrectly here. Also, Its a REACT project and my package.json has a dependency for "antd": "^4.5.0" and the import for antd.css exists in app.tsx like this

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

This is a code I have in one of the component files of the project.

File name: 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>
      );

Here is how mystyles.module.scss looks like

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

--- update 1

解决方案

You need to override the below classes. It should work. Use !important only if your css is overridden by the existing classes. You need to import "antd/dist/antd.css"; to get these in the console and then override the 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;
}

Edit - Included the codesandbox link and the hover css

这篇关于蚂蚁设计按钮颜色更新的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！