css(react)中 global
<h3>局部作用域</h3><p>css的规则都是全局的，任何一个组件的样式规则，都对整个页面有效。产生局部作用域的唯一方法，就是使用一个独一无二的class的名字，不会与其他选择器重名，但是当我们与其他人共同开发的时候，无法保证一定与其他人不同，这时候就要用到css modules。</p>
<p>下面是一个React组件App.js</p>
<div class="cnblogs_code">
<pre>import React from 'react'<span style="color: rgba(0, 0, 0, 1)">;
import style from </span>'./App.css'<span style="color: rgba(0, 0, 0, 1)">;
export </span><span style="color: rgba(0, 0, 255, 1)">default</span> () =><span style="color: rgba(0, 0, 0, 1)"> {
</span><span style="color: rgba(0, 0, 255, 1)">return</span><span style="color: rgba(0, 0, 0, 1)"> (
</span><h1 className={style.title}><span style="color: rgba(0, 0, 0, 1)">
Hello World
</span></h1>
<span style="color: rgba(0, 0, 0, 1)">);
};</span></pre>
</div>
<p>上面代码中，我们将样式文件App.css输入到style对象，然后引用style.title代表一个class</p>
<div class="cnblogs_code">
<pre><span style="color: rgba(0, 0, 0, 1)">.title {
color: red;
}</span></pre>
</div>
<p>构建工具会将类名style.title编译成一个哈希字符串。</p>
<div class="cnblogs_code">
<pre><h1 class="_3zyde4l1yATCOkgn-DBWEL"><span style="color: rgba(0, 0, 0, 1)">
Hello World
</span></h1></pre>
</div>
<p>App.css也会同时被编译</p>
<div class="cnblogs_code">
<pre>._3zyde4l1yATCOkgn-<span style="color: rgba(0, 0, 0, 1)">DBWEL {
color: red;
}</span></pre>
</div>
<p>这样一来，这个类名就变成独一无二了，只对App组件有效。</p>
<h3>global</h3>
<p>使用global声明的class，都不会被编译成哈希字符串。</p>
<div class="cnblogs_code">
<pre><span style="color: rgba(0, 0, 0, 1)">:global {
...
}</span></pre>
</div>
<pre>:global(#root) {<br> ...<br>}</pre>
<p>不会把id为root的元素的 id 编译成哈希字符串。</p>
<p>示例如下：</p>
<p>html：</p>
<p><img src="https://img2020.cnblogs.com/blog/1249006/202008/1249006-20200812114025205-1250887506.png" alt="" loading="lazy"></p>
<p> </p>
<p>css：</p>
<p><img src="https://img2020.cnblogs.com/blog/1249006/202008/1249006-20200812113756641-218100723.png" alt="" loading="lazy"></p>
<p> </p>
<p> 编译结果</p>
<p><img src="https://img2020.cnblogs.com/blog/1249006/202008/1249006-20200812113811670-862537403.png" alt="" loading="lazy"></p>
<p> </p>
<p> </p>
<p>-------------------</p>
<p><img src="https://img2020.cnblogs.com/blog/1249006/202008/1249006-20200812113825407-978613877.png" alt="" loading="lazy"></p>
<p> </p>
<p> 编译结果</p>
<p><img src="https://img2020.cnblogs.com/blog/1249006/202008/1249006-20200812113835514-2104146953.png" alt="" loading="lazy"></p>
<p> </p>
<p> </p>
<p>相信到这里大家一看就明白了。</p>
<p> </p><br><br>
来源：https://www.cnblogs.com/taohuaya/p/13489655.html
頁:
[1]