0

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

enter image description here

Ole Pannier
  • 3,208
  • 9
  • 22
  • 33
Sarah
  • 1,199
  • 2
  • 21
  • 42

2 Answers2

2

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

Anand
  • 408
  • 2
  • 14
  • Check this out! https://codesandbox.io/s/nameless-dream-4ojr4 – Anand Sep 08 '20 at 20:08
  • Thanks @anand, I see you are bringing import "antd/dist/antd.css"; Do I need to bring that in my file too if I am overriding the existing classes? Because I am not currently. – Sarah Sep 08 '20 at 21:03
  • ok I see that sandbox code is updating, however I need help with my code. As you can see my radio group is using a toggle class from mystyles.module.scss, if I add your code to the .scss, I am still not seeing the colors updated. – Sarah Sep 08 '20 at 21:11
  • Please check this.. https://codesandbox.io/s/wizardly-wildflower-je63u?file=/index.js I am updating my post with how its looking also. – Sarah Sep 08 '20 at 21:23
  • Using import "antd/dist/antd.css"; in your code lets you override the CSS. Without this, the CSS is not showing up in the console even to override. – Anand Sep 09 '20 at 05:36
  • Thanks @anand, so the project has import as a global in _app.tsx and if I add it again to my component file, I get an error Global CSS cannot be imported from files other than your Custom . Please move all global CSS imports to pages\_app.tsx. So I cant import antd css to my components files and all this code is in the component files. – Sarah Sep 09 '20 at 06:07
  • I do see the antd css in the browser in dev tools and if I update it there, it works... but if I update it in my code in the project in my modules for the component, its totally ignores your code. – Sarah Sep 09 '20 at 06:08
  • I updated my post with a brief structure of the project too if that helps. Thank you so much for helping! – Sarah Sep 09 '20 at 06:14
  • Not sure if I can help here about the global css error @Sarah. – Anand Sep 11 '20 at 09:00
0

I can not write comment (too low reputation), so i will write an "answer". You can try to change theme of ant-design https://ant.design/docs/react/customize-theme (This default blue color is primary one). However it requires some changes and new color will be applied globally, so its not too good for existing big projects.

Pabblo13
  • 181
  • 1
  • 4