在react中使用css modules解決組件之間樣式覆蓋問題

今天在寫react項目的時候發現兩個組件之間相同類名之間樣式會發生覆蓋的問題，上網查了一下，大佬們都推薦使用css IN JS
簡單介紹一下自己的使用：come on baby
介紹：css in js是使用js編寫css統稱，用來解決css樣式沖突，覆蓋等問題
css in js 的具體實現有50多種，其中兩種是比較出名的：css modules和styled-components
在react中推薦使用：css modules，因為react腳手架已經集成進來了，可以直接使用

• css modules 通過對css類名的重命名，保證每一個類名的唯一性，從而避免樣式沖突問題
• 實現方式：webpack的css-loader插件
• 在react腳手架中演化成：文件名，類名，hash（隨機）三部分，只需要指定類名即可。

在index.module,css中我們寫一個類名
.red{




}
通過css modules就會給我們轉化成類名
.Button_error_axy4s

 css modules  在項目中的使用
1.首先創建一個名為index.module.css的樣式文件，（這是react中約定的，與普通css區分開）

在要使用的文件中創建樣式文件名稱
index.module.css

2.在組件中導入樣式文件（注意語法）

在要使用的文件在中進行引入
import styles from './index.module.css'

3.通過styles對象訪問對象中的樣式名來設置樣式

<div className={styles.類名}></div>

注：我們在寫項目的時候，避免不了使用ui組件，我們要想改變全局樣式，需要通過:global()來進行設置
因為我們設置的類名已經發生改變，所以我們在改變組件中的樣式時要使用組件中提供的類名
如：

：global（.am-navbar-title）{
color:#333;
}

.map{
 padding-top: 45px;




 height: 100%;
}
.container{
 height: 100%;
}
在全局樣式前面可以加上屬於哪個類名之下，這樣可以提高權重，避免覆蓋組件類名的樣式
.map :global(.am-navbar){
 margin-top: -45px;
}
這裏是我寫的index.module.css文件

在頁面中就變成這樣的類名

css modules
最後附帶上css modules在github上的地址，大佬們請多指教