使用CSS Module时,如何对子元素样式进行覆盖

阅读 75

2022-03-22

如: 给一个封装好的组件赋予 miniSize 的className,但是它内部有一个className为 mini-size-text span元素,我想修改它的font-size,应该怎么做?

直接使用子元素选择器是不生效的,因为CSS Module会对编译文件内部的所有className

.miniSize{
    .mini-type-title{
        font-size: 12px;
    }
}

而使用 span 选择器,会统一修改其他span元素的样式

使用 :global

.miniSize{
    :global .mini-type-title{
        font-size: 12px;
    }
}

// 或

.miniSize{
    :global{
        .mini-type-title{
            font-size: 12px;
        }
    }
}

精彩评论(0)

0 0 举报