Ant 设计按钮颜色更新

问题描述

我正在尝试更新

解决方案

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

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

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

编辑 - 包括代码和框链接和悬停 css

I'm trying to update Radio Button colors of an ant design radio mentioned in this link in my REACT App.

I tried using the suggestion in this post to update the colors.

But my colors are not updating. I am not sure what I'm 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

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