react 更改组件默认样式，且不影响其他地方组件的样式

最新推荐文章于 2023-08-17 16:05:04 发布

黛玉戴玉逮鱼

最新推荐文章于 2023-08-17 16:05:04 发布

阅读量405

点赞数

分类专栏： React 文章标签： react.js 前端

本文链接：https://blog.csdn.net/weixin_44730335/article/details/128304944

版权

React 专栏收录该内容

19 篇文章 0 订阅

订阅专栏

使用 :global 穿透，但是修改了一个地方的组件样式，其他地方也跟着改变了，怎么办呢？

给被穿透的组件类名外包裹一层自己定义的className，同时在 :global 后面加上 () ，在括号内指定外层组件类名。

写法如下：

.main{ 
   :global(.slick-dots) {
      bottom: 0 !important;
      background-color: pink !important;
      li.slick-active button:before {
        color: $cyan !important;
      }
      li.slick-active button:before {
        border: 6px $cyan solid;
        border-radius: 50%;
        width: 22px;
        height: 20px;
        line-height: 10px;
      }
    }
}