在 react 當中有提供了不同的 css 方法,除了常見的 css in css 外, 另外現在前端主流使用的 style system, css in js (styled component, emotion) 和 utility (tailwind) 等,以下會先從最傳統的 css in css 介紹起。 為了方便,以下範例都以 create-react-app 為主,除了 sass, 不另外使用 webpack

Stylesheets

• 在 React 當中如果要使用全域的 CSS ,可以在 index.js 或是 App.js 引入
  只要用 import 的方式就可引入,注意的是這邊引入的 css 是全域,只要其他的 component 有重複
  class name,皆有可能此 css 的樣式

  //App.js
  
  import 'App.css'
  
  function App (){
    return (<div className="continer">
  		<Button/>
    </div>) 
  }
  
  上面 div 的 className 編譯純 html 後會變成
  
  <div class="container"></div>
  
  function Button (){
  	<div className="container"> 
  	// 因為 App.js 有引入 App.css,包含 container class,
       這邊的 container 也會吃到 container 樣式
    </div>
  }
  
  

CSS Modules

上敘因為 stylesheet 的方式會造成 class 樣式對於全域的污染, 所以我們可以把我們的 css 檔命成, [name].module.css , ex: 檔名為 Button.module.css 的 css 檔, 在此範圍內的 css檔,在每一個 className 都會產生 hash, 所以每一個 className 都不會污染其他 className, create react app 的 hash 規則為 [filename]\_[classname]\_\_[hash]

• 以下為範例

  // Button.module.css
  
  .button{
  	width:100px;
  	height:40px;
  	border-radious:50%;
  	text-align:center;
  	line-height:40px;
  }
  

  // Button.js
  import style form './Button.module.css' 
  // style 可以為任意命名,這邊取 style 為常用的名稱方便辨識
  
  function Button (){
   return <button className={style.button}>Open</button>
  
   上面 button 的 className 編譯純 html 後會變成
   <div class="Button_container_as345"></div>
  }
  

假設在 CSS module 當中想使用一個 預設 的 button 樣式, 另外含有 outline 樣式的 button ,我們就可以使用 :global 的語法來使 css 中的 class 具有 global 的效果

// Button.module.css

:global(.button){
	width:100px;
	height:40px;
	border-radious:50%;
	text-align:center;
	line-height:40px;
}

.buttonOutline{
  border:1px solid #FFFFFF;
	background-color: #000000;
	color: #FFFFFF;
}

// Button.js
import style form './Button.module.css' 

function Button (){
 return <button className={`button ${style.buttonOutline}`}>Open</button>
	上面 button 的 className 編譯純 html 後會變成
  <div class="button Button_container_as345"></div>
}