有没有办法覆盖 Ant design Switch 组件中的颜色

Question

我需要在选中时覆盖 Antd Switch 组件上的默认蓝色（主色）并将其更改为红色。我有办法做到这一点吗？

我尝试过使用样式属性，但它不起作用。

Answer 1

您可以使用这样的内联样式更改背景颜色。

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

Answer 2

您可以像这样重写 .ant-switch-checked 类

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

Answer 3

更简洁的方法是使用 Ant Design (antd) 5 版本之后提供的官方主题。下面是一个示例：

<ConfigProvider
      theme={{
        components: { 
          Switch: {
            colorPrimary: "red",
          },
        },
      }}
    >
      <Form.Item label="" name="remember" style={{ color: "white" }}>
         <Switch className="mb-2" />
      </Form.Item>
    </ConfigProvider>

Answer 4

我发现

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

当我做出反应表格setfieldvalue发生在此开关的其他地方时，做得并没有工作，所以我有

<Switch
    style={{backgroundColor:`${props.form.getFieldValue("permission")?"green":"orange"}`}}/>

Answer 5

您可以通过覆盖开关类的默认类（您将从开发人员工具中获取所有元素类）来更改开关样式，

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

因此它将全局覆盖颜色，要覆盖特定元素的颜色，只需将元素包装在某个 div 中给类“test”并覆盖CSS

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

，它只会更新特定元素的颜色。

Answer 6

在您的 main/theme 文件中，您可以像这样覆盖变量：

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

或者

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

您实际上可以覆盖您使用的任何变量：参考