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

查看:48
本文介绍了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 设计按钮颜色更新的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持IT屋!

查看全文
登录 关闭
扫码关注1秒登录
发送“验证码”获取 | 15天全站免登陆