reactLess深度选择器

react less 全局 / 深度选择器

use

    
    /*
    * 在最近的项目中，是使用 import styles from './index.less' 这种方式，
    &
    * 发现这种方式引入的类名下无法选中 ant 的组件名，比如 .ant -btn。
    & 
    * 而直接引入的方式样式又不会生效（import './index.less'），
    & 
    * 问了同事，使用 :global 就可以选中修改这个 ant 组件了。
    *
    */

.switch-list-item {
    display: flex;
    align-items: center;
    margin-bottom: 16px;

    .switch-label {
        display: inline-block;
        width: 128px;
        margin-right: 25px;
        text-align: right;
    }

    :global .ant-switch-checked {
        background-color: #3369e9;
    }

    :global .ant-switch {
        width: 44px;
    }

    :global .ant-switch-checked .ant-switch-handle {
        left: calc(54%);
    }
}

在编写 less 时， 建议采用如上的方式，空出空格, 更加清晰明了。

other

/*
* 一般我们在react组件中的class类名都是 className='wrap'，
& 
* 引入了classnames 一般是 className={cn('wrap')} 、 
&
* className={cn('wrap', {'chooseIndex': flag === '1'})},
& 
* 现在可以用 className={styles.wrap} 、
& 
* className={styles['switch-list-item']} 、
& 
* const colorName = todo === '可用' ? 'blue' : 'red';
& 
* className={styles[colorName]} 这种方式。
& 
* 跟classnames 相比，同样非常灵活。
*/