首页 > 其他分享 >修改antd中Switch组件的颜色

修改antd中Switch组件的颜色

时间:2022-11-01 15:46:27浏览次数:70  
标签:less color ant Switch background 组件 antd

产品说,需要把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>

标签:less,color,ant,Switch,background,组件,antd
From: https://www.cnblogs.com/zhengyeye/p/16847936.html

相关文章

  • vue组件name的作用
    转自:https://blog.csdn.net/gxdzi/article/details/120645286作用一:递归组件一个组件要用自己的时候,可以通过自己的名字来使用自己。作用二:移除keep-alive状态下组件自......
  • Freeswitch sofia常用命令
     #查看所有已注册用户sofiastatusprofileinternalreg#查看已注册用户1006sofiastatusprofileinternalreg1006sofiastatusprofileinternaluser1006#删除已注......
  • OpenHarmony组件之TextPicker和 TextTimer
    TextPicker滚动选择文本的组件。我们先直接上示例。//xxx.ets@Entry@ComponentstructTextPickerExample{privateselect:number=1privatefruits:string[]=['a......
  • vue 祖先组件操作后代组件方法
      前言:最近写代码遇到一问题:祖先级别的组件怎么操作孙子的儿子的组件方法(是不是已经绕晕了),在网上搜了半天都是父子传参,父子操作,晕晕乎乎的想起了bus(事件总线),原理就......
  • 【freeswitch】基于FreeSwitch实现的Webrtc VoIP Phone
    最近有一个客户的呼叫中心项目,客户提出了一个强制性需求,要求坐席使用PC+Phone的方式来接听电话,而且最重要的是PC不能安装任何软件或者浏览器插件,研究了半天,似乎只有华山一......
  • JMETER与它的组件们
    JSON提取器与DebugSampler我们平时会遇到很多JSON格式的接口返回,我们需要提取参数可以用JSON提取器,同时配合自带的调试器来进行调试。 JSON提取器Nameofcreatedva......
  • SpringCloudAlibaba 主要组件与nacos 填坑记录
    SpringCloudAlibaba主要功能与实现组件(1)SpringCloudAlibaba主要功能与实现组件【功能与实现组件:】服务限流降级:基本说明:默认支持WebServlet、WebF......
  • Element基本组件
     Element按钮组件:  <el-row><el-button>默认按钮</el-button><el-buttontype="primary">主要按钮</el-button><el-buttontype="success">成功按钮</el......
  • 微信小程序登录后刷新不了页面,使用switchTab跳转后刷新不了页面
    效果图因为是tab页面不能用redirectTo,得使用switchTab,我使用switchTab但是登录后调用了刷新不了页面,导致数据没显示出来,下图是完成的效果图原先js代码wx.switchTab......
  • Flutter 短信验证码组件
    效果图思路因为需要弹出键盘,所以使用了一个隐藏的TextField,通过点击事件捕获焦点,方块只做展示使用。组件代码import'package:bubble_mobile/util/func_utils.dart';......