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-switch-checked{
   background:#fdfdfd !important;
}

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

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

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

Answer 4

在您的

main

/

theme

文件中，您可以像这样覆盖变量：

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

或

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

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

Answer 5

更简洁的方法是使用 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>