Is there a way to override the colors in Ant design Switch Component

Question

i need to override the default blue (primary color) on Antd Switch Component when checked and change it to red color. is there a way i can do this?

i have tried using style attribute but it didnt work.

Answer 1

You can change the backgroundColor using inline styles like this.

<Switch style={{backgroundColor: permission.enabled ? 'green' : 'orange'}}
        checked={permission.enabled}
        checkedChildren={'ENABLED'}
        unCheckedChildren={'DISABLED'}
        onChange={(e) => onPermissionChanged(e, permission)} />

Answer 2

You can override the .ant-switch-checked class like so

.ant-switch-checked {
   background-color: red;
}

Answer 3

you can change switch styling by overriding default class (you will get all the element classes from developer tool) for switch class

.ant-switch-checked{
   background:#fdfdfd !important;
}

as a result it will override the color globally, to override the color for specific element only just wrap the element in some div by giving class "test" and override the css like

.test .ant-switch-checked{
   background:#fdfdfd !important;
}

and it will update the color for specific elemet only.

Answer 4

In your main/themefile, you can just override the variable like so:

@switch-color: red; // @primary-color

or

@switch-bg: red; // @component-background;

You can actually override any variables to your use: reference