006-ant design pro 樣式
一、概述
參看地址:https://pro.ant.design/docs/style-cn
基礎的 CSS 知識或查閱屬性，可以參考 MDN文檔。
二、詳細介紹
2.1、less
Ant Design Pro 默認使用 less 作為樣式語言，建議在使用前或者遇到疑問時學習一下 less 的相關特性。
2.2、css modules
在樣式開發過程中，有兩個問題比較突出：
-
-
全局汙染 —— CSS 文件中的選擇器是全局生效的，不同文件中的同名選擇器，根據 build 後生成文件中的先後順序，後面的樣式會將前面的覆蓋；
-
選擇器復雜
—— 為了避免上面的問題，我們在編寫樣式的時候不得不小心翼翼，類名裏會帶上限制範圍的標識，變得越來越長，多人開發時還很容易導致命名風格混亂，一個元素上使用的選擇器個數也可能越來越多。
-
為了解決上述問題，我們的腳手架默認使用 CSS Modules 模塊化方案，先來看下在這種模式下怎麽寫樣式。
// example.js import styles from ‘./example.less‘; export default ({ title }) => <div className={styles.title}>{title}</div>;
// example.less .title { color: @heading-color; font-weight: 600; margin-bottom: 16px; }
用 less 寫樣式好像沒什麽改變，只是類名比較簡單（實際項目中也是這樣），js 文件的改變就是在設置 className 時，用一個對象屬性取代了原來的字符串，屬性名跟 less 文件中對應的類名相同，對象從 less 文件中引入。
局部樣式與全局樣式
在上面的樣式文件中，.title 只會在本文件生效，你可以在其他任意文件中使用同名選擇器，也不會對這裏造成影響。不過有的時候，我們就是想要一個全局生效的樣式呢？可以使用 :global
// example.less .title { color: @heading-color; font-weight: 600; margin-bottom: 16px; } /* 定義全局樣式 */ :global(.text) { font-size: 16px; } /* 定義多個全局樣式 */ :global { .footer { color: #ccc; } .sider { background: #ebebeb; } }
CSS Modules 的基本原理
CSS Modules 的基本原理很簡單，就是對每個類名（非 :global 聲明的）按照一定規則進行轉換，保證它的唯一性。如果在瀏覽器裏查看這個示例的 dom 結構，你會發現實際渲染出來是這樣的：
<div class="title___3TqAx">title</div>
類名被自動添加了一個 hash 值，這保證了它的唯一性。
除了上面的基礎知識，還有一些關鍵點需要註意：
-
CSS Modules 只會對
className以及id進行轉換，其他的比如屬性選擇器，標簽選擇器都不進行處理，推薦盡量使用 className。 -
由於不用擔心類名重復，你的 className 可以在基本語意化的前提下盡量簡單一點兒。
上面只對 CSS Modules 進行了最基礎的介紹，有興趣可以參考其他文檔：
-
github/css-modules
-
CSS Modules 用法教程
-
CSS Modules 詳解及 React 中實踐
2.3、樣式文件類別
在一個項目中，樣式文件根據功能不同，可以劃分為不同的類別。
src/index.less
全局樣式文件，在這裏你可以進行一些通用設置，比如腳手架中自帶的：
html, body, :global(#root) { height: 100%; } body { text-rendering: optimizeLegibility; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; } // temporary font size patch :global(.ant-tag) { font-size: 12px; }
因為 antd 中會自帶一些全局設置，如字號，顏色，行高等，所以在這裏，你只需要關註自己的個性化需求即可，不用進行大量的 reset。
src/utils/utils.less
這裏可以放置一些工具函數供調用，比如清除浮動 .clearfix。
模塊樣式
針對某個模塊/頁面生效的文件。
通用模塊級
例如 src/layouts/BasicLayout.less，裏面包含一些基本布局的樣式，被 src/layouts/BasicLayout.js 引用，項目中使用這種布局的頁面就不需要再關心整體布局的設置。如果你的項目中需要使用其他布局，也建議將布局相關的 js 和 less 放在這裏 src/layouts。
頁面級
具體頁面相關的樣式，例如 src/routes/Dashborad/Monitor.less，裏面的內容僅和本頁面的內容相關。一般情況下，如果不是頁面內容特別復雜，有了前面全局樣式、通用模塊樣式的配合，這裏要寫的應該不多。
組件級
這個也很簡單，就是組件相關的樣式了，有一些在頁面中重復使用的片段或相對獨立的功能，你可以提煉成組件，相關的樣式也應該提煉出來放在組件中，而不是混淆在頁面裏。
以上樣式類別都是針對獨立的樣式文件，有時樣式配置特別簡單，也沒有重復使用，你也可以用內聯樣式
style={{ ... }}來設置。
2.4、覆蓋組件樣式
由於業務的個性化需求，我們經常會遇到需要覆蓋組件樣式的情況，這裏舉個簡單的例子。
antd Select 在多選狀態下，默認會展示所有選中項，這裏我們給它加一個限制高度，超過此高度就出滾動條。
// TestPage.js import { Select } from ‘antd‘; import styles from ‘./TestPage.less‘ const Option = Select.Option; const children = []; for (let i = 10; i < 36; i++) { children.push(<Option key={i.toString(36) + i}>{i.toString(36) + i}</Option>); } ReactDOM.render( <Select mode="multiple" style={{ width: 300 }} placeholder="Please select" className={styles.customSelect} > {children} </Select> , mountNode);
// TestPage.less .customSelect { :global { .ant-select-selection { max-height: 51px; overflow: auto; } } }
方法很簡單，有兩點需要註意：
-
引入的 antd 組件類名沒有被 CSS Modules 轉化，所以被覆蓋的類名
.ant-select-selection必須放到:global中。 -
因為上一條的關系，覆蓋是全局性的。為了防止對其他 Select 組件造成影響，所以需要包裹額外的 className 限制樣式的生效範圍。
006-ant design pro 樣式