CSS Modules是啥子東西？一起來了解一下！

今年四月的時候面試了一家公司，

技術面的時候被人家問到了CSS Module有了解過麼，我說沒有了解過，

他就繼續問到，那你在平常開發的時候給元件和元素起類別名稱該怎麼辦呢？
我說給元素和元件加指定前綴，這樣就能夠保證自己寫的類別名稱和其他同事寫的類別名稱不會起衝突。

然後就沒然後了，，後續又問了我很多React原理啥的面試就過了。

今天我們就把CSS Modules是個啥子東西給他弄明白，這樣會更加分。

【推薦教學：CSS影片教學 】

首先我們來看一張圖：

一張圖理解CSS Modules 的工作原理：

我們自己編碼的時候有兩個文件，一個是ProductList.less文件，一個是ProductList.jsx文件
在構建之後會將less文件轉換成藍色標題的那個文件。

可以由此看出：

• button class在建置之後會被重新命名為ProductList_button_1FU0u。 button是local name，而 ProductList_button_1FU0u 是 global name 。 你可以用簡短的描述性名字，而不需要關心命名衝突問題。

然後你要做的全部事情就是在 css/less 檔案裡寫 .button {…}，並在元件裡透過 styles.button 來引用他。

定義全域CSS

CSS Modules預設是局部作用域的，想要聲名一個全域規則，可用:global語法。

例如：

.title {
	color: red;
}
:global(.title) {
	color: green;
}

在引用的時候：

<App className={styles.title} /> // red
<App className="title" />        // green

classnames Package

在一些複雜場景中，一個元素可能對應多個className，而每個className又基於一些條件決定是否出現。這時，classnames這個函式庫就非常有用。

import classnames from 'classnames';
const App = (props) => {
	const cls = classnames({
		btn: true,
		btnLarge: props.type === 'submit',
		btnSmall: props.type === 'edit',
	});
	return <div className={ cls } />;
}

這樣，傳入不同的type 給App 元件，就會傳回不同的className 組合：

<App type="submit" /> // btn btnLarge
<App type="edit" />   // btn btnSmall

更多程式相關知識，請造訪：程式設計教學 ！ ！

以上是CSS Modules是啥子東西？一起來了解一下！的詳細內容。更多資訊請關注PHP中文網其他相關文章！