使用less修改react的ant组件的时候样式修改问题

使用less修改组件样式的时候

我们在组件中引入less文件的时候，通过

import styles from "./index.less"

想在less中修改样式需要给标签添加

<div className={styles.box}></div>

之后再less文件中直接修改

.box{

        width:100px;

        height:100px;

        background-color: red;

}

但是注意的是在ant组件中没有className={styles.XXX}

就不能直接在控制台看这类名进行修改。想要修改ant组件中的样式，需要使用    :global  (英文的冒号加上global来进行修改)

:global的作用是什么 ： 可以直接就是按照标签中的class名字在less中直接使用

// 多选框组件的下拉字体样式

:global {

  .ant-select-item-option {

    .ant-select-item-option-content {

      color: aliceblue;

    }

  }

}

值得我们注意的是：在修改的时候为了不影响其他组件中的同一个组件的样式，可以在组件的外面套一个盒子

<div className={styles.box}>

        <Select></Select>

</div>

在less中使用

.box{

        :global {

          .ant-select-item-option {

            .ant-select-item-option-content {

              color: aliceblue;

            }

          }

        }

}