iT邦幫忙

2021 iThome 鐵人賽

DAY 5
0
Modern Web

寫出好維護又簡潔的 react 程式碼 feat: Function Programming系列 第 5

day5: CSS style 規劃 CSS module (global CSS, CSS module)

在 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>
}

上一篇
day4: 程式碼的命名 (function, event, customer hook)
下一篇
day6: CSS style 規劃 - CSS in js
系列文
寫出好維護又簡潔的 react 程式碼 feat: Function Programming30

尚未有邦友留言

立即登入留言