css作用域
概述:
最近在项目中遇到很多样式冲突的问题,发现是由于在css中使用很多deep和css的作用域问题导致的,所以写个文章记录样式冲突问题解决方案
前言
提示:这里可以添加本文要记录的大概内容:
Scoped CSS
与CSS Module
是两大解决CSS中不存在模块化缺陷的有效手段
提示:以下是本篇文章正文内容,下面案例可供参考
一、CSS Module
简介:
CSS Module通过将class名称做编码转换的方式来保证唯一性,从而避免样式冲突(其根本就是为了保证不会发生同名即使同名也不会造成冲突)
示例:
html
转换前
<h1 className={style.title}>
Hello World
</h1>
转换后
<h1 class="_3zyde4l1yATCOkgn-DBWEL">
Hello World
</h1>
css
转换前
.title {
color: red;
}
转换后
._3zyde4l1yATCOkgn-DBWEL {
color: red;
}
二、Scoped CSS
简介
使用的是另一种解决方案 —— 在HTML标签上做文章
直接上代码
<style scoped>
.example {
color: red;
}
</style>
<template>
<div class="example">hi</div>
</template>
总结
例如:以上就是今天要讲的内容,本文仅仅简单介绍了css作用域,若需要深入修改样式可以使用deep但是也需要css作用域以防发生样式冲突