修改antd中Switch组件的颜色

产品说,需要把Switch组件选中时是“红色”背景,不选中时是“蓝色”背景。效果如下:

1.创建一个less文件

@import '~antd/es/style/variable.less';


  .box{
    .ant-table-cell:nth-child(8){
        .ant-switch-checked:nth-child(1) {
            background-color: #1677FF;
            background-color: red;
        }
        .ant-switch{
            background-color: #1677FF;
        }
    }
  }
  

2.在文件中引入less样式文件

import './UserList.less'
     <div className='box'>
        <Table
            loading={loading}
            rowKey={(record) => `${record.platformId}-${record.userId}`}
            columns={columns}
            dataSource={userList}

            bordered
            pagination={pagination}
            onChange={handleTableChange}
          />
       </div>
posted @ 2022-11-01 15:37  郑叶叶  阅读(1692)  评论(0编辑  收藏  举报