文章目錄
這篇文檔主要針對如何在項目中使用和規劃樣式文件進行介紹，如果想獲取基礎的 CSS 知識或查閱屬性，可以參考 MDN 文檔。
1. less
Ant Design Pro 默認使用 less 作爲樣式語言，建議在使用前或者遇到疑問時學習一下 less 的相關特性。
2. CSS Modules
在樣式開發過程中，有兩個問題比較突出：
- 全局污染：CSS 文件中的選擇器是全局生效的，不同文件中的同名選擇器，根據
build後生成文件中的先後順序，後面的樣式會將前面的覆蓋； - 選擇器複雜：爲了避免上面的問題，我們在編寫樣式的時候不得不小心翼翼，類名裏會帶上限制範圍的標識，變得越來越長，多人開發時還很容易導致命名風格混亂，一個元素上使用的選擇器個數也可能越來越多。
爲了解決上述問題，我們的腳手架默認使用 CSS Modules 模塊化方案，先來看下在這種模式下怎麼寫樣式。
// example.ts
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 的基本原理很簡單，就是對每個類名（非 :global 聲明的）按照一定規則進行轉換，保證它的唯一性。如果在瀏覽器裏查看這個示例的 dom 結構，你會發現實際渲染出來是這樣的：
<div class="title___3TqAx">title</div>
類名被自動添加了一個 hash 值，這保證了它的唯一性。
除了上面的基礎知識，還有一些關鍵點需要注意：
- CSS Modules 只會對
className以及id進行轉換，其他的比如屬性選擇器，標籤選擇器都不進行處理，推薦儘量使用 className。 - 由於不用擔心類名重複，你的 className 可以在基本語意化的前提下儘量簡單一點兒。
上面只對 CSS Modules 進行了最基礎的介紹，有興趣可以參考其他文檔：
3. 樣式文件類別
在一個項目中，樣式文件根據功能不同，可以劃分爲不同的類別。
3.1 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。
3.2 src/utils/utils.less
這裏可以放置一些工具函數供調用，比如清除浮動 .clearfix。
3.3 模塊樣式
針對某個模塊/頁面生效的文件。
3.3.1 通用模塊級
例如 src/layouts/BasicLayout.less，裏面包含一些基本佈局的樣式，被 src/layouts/BasicLayout.ts 引用，項目中使用這種佈局的頁面就不需要再關心整體佈局的設置。如果你的項目中需要使用其他佈局，也建議將佈局相關的 js 和 less 放在這裏 src/layouts。
3.3.2 頁面級
具體頁面相關的樣式，例如 src/routes/Dashborad/Monitor.less，裏面的內容僅和本頁面的內容相關。一般情況下，如果不是頁面內容特別複雜，有了前面全局樣式、通用模塊樣式的配合，這裏要寫的應該不多。
3.3.3 組件級
這個也很簡單，就是組件相關的樣式了，有一些在頁面中重複使用的片段或相對獨立的功能，你可以提煉成組件，相關的樣式也應該提煉出來放在組件中，而不是混淆在頁面裏。
以上樣式類別都是針對獨立的樣式文件，有時樣式配置特別簡單，也沒有重複使用，你也可以用內聯樣式
style={{ ... }}來設置。
4. 覆蓋組件樣式
由於業務的個性化需求，我們經常會遇到需要覆蓋組件樣式的情況，這裏舉個簡單的例子。
antd Select 在多選狀態下，默認會展示所有選中項，這裏我們給它加一個限制高度，超過此高度就出滾動條。
// TestPage.ts
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限制樣式的生效範圍。