我一直在學習在 React 中使用 CSS 并遇到了 CSS 模塊的想法，作為其中的一部分，我遇到了這篇文章https://blog.fearcat.in/a?ID=00550-af5ece9b-eb49-4e13 -8711-26e00c48c84e討論了在 CSS 檔案中使用 :global 和 :local ，但它在某一點提到了這一點
:local(.className) ，相當于 .className
所以我從這篇文章中了解到，使用 :global 會將 CSS 規則置于全域級別，但是如果 :local 等同于只有 .className，為什么還要使用它？似乎沒有任何功能差異。
uj5u.com熱心網友回復：
默認情況下，CSS 模塊中的 CSS 是本地的。但是當你使用:global限定符/塊時，如果你想切換回localCSS，那么你應該這樣做。
想象一下，您正在global使用css-loader選項為 CSS 模塊使用 mode ：
module: {
rules: [
{
test: /\.css$/i,
use: [
MiniCssExtractPlugin.loader,
{
loader: 'css-loader',
options: {
// THIS IS IMPORTANT
modules: 'global'
}
}
],
}
]
}
對于上述配置，請考慮以下示例：
.abc { color: red; }
:global(.abc) { color: green; }
:local .xyz { color: blue; }
:local(.xyz) .pqr { color: yellow; }
.abc :local .xyz .pqr { color: cyan; }
它將被編譯成以下 CSS。
/* Since it is global model for CSS modules, classname is not hashed */
.abc { color: red; }
/* .global(.abc) has no effect here */
.abc { color: green; }
/* :local .xyz means anything after :local will be hashed */
.dkzEiLgPjIar3vTOyiHv { color: blue; }
/* .local(.xyz) .pqr means only .xyz is hashed */
.dkzEiLgPjIar3vTOyiHv .pqr { color: yellow; }
/* Everything after the :local is hashed i.e. both .xyz and .pqr */
.abc .dkzEiLgPjIar3vTOyiHv .k3SKPTpkzRcircxhU4Dd { color: cyan; }
:local 和 :local(selector) 之間的區別很微妙。前者是激進的（在它之后散列選擇器），后者是寬松的。如果我使用 CSS Scope 作為本地 iemodules: true或modules: 'local'.
現在回答你的問題，為什么我要在 :local 內部使用 :global 是因為我有一些組件，當它在某個或頂級組件內部時，應該更改其樣式。試想，一個.text應該是18像素的大小時，它里面的.blogArticle。否則這個組件應該默認呈現為14px：
:local .text { font-size: 14px; }
.blogArticle :local(.text) { font-size: 18px ;}
但總的來說，你是對的。您很少需要放入localinside global。您這樣做的唯一原因是一些遺留的復雜 CSS，您正在遷移到更新的代碼庫，并希望將相關的 CSS 塊保持在一起以提高可讀性。最后但并非最不重要的一點，請考慮像這樣的深層嵌套遺留 CSS：
.abc :local .xyz .pqr :global(.def) {
color: cyan;
}
我開始global，然后切換到:local，然后再次切換到:global(.def)。但是需要這樣做是反模式/代碼氣味的一個很好的例子。
uj5u.com熱心網友回復：
當您在多個組件中具有相同的 className 時會有所不同。例如，你有compoment Awith<div className={classes.wrapper}>然后你有Component Bwith <div className={classes.wrapper}。使用普通 css，如果這些“包裝器”類的 css 檔案中的屬性不同，則第一個會被最后一個覆寫。就像在您的組件中阻塞作用域一樣，并且不要“生活”在組件之外。當然，您可以在 global.css 檔案中添加將在整個專案中出現的所有其他屬性
.wrapper{ //component A
display:flex;
flex-direction:column;
}
.wrapper { //component B
display:flex;
flex-direction:column;
width:60%;
}
使用普通 css，最后一個屬性將覆寫第一個，.wrapper因此模塊 100% 與div.
轉載請註明出處，本文鏈接：https://www.uj5u.com/shujuku/318592.html
上一篇：POST后的PHP重定向