# 樣式方案的選擇 現有的一些樣式方案： - Inline CSS ~~~ const divStyle = { color: 'blue', backgroundImage: 'url(' + imgUrl + ')', }; function HelloWorldComponent() { return <div style={divStyle}>Hello World!</div>; } ~~~ - CSS in JS（多種解決方案） 以 styled component 為例 ``` // Create a Title component that'll render an <h1> tag with some styles const Title = styled.h1` font-size: 1.5em; text-align: center; color: palevioletred; `; // Create a Wrapper component that'll render a <section> tag with some styles const Wrapper = styled.section` padding: 4em; background: papayawhip; `; // Use Title and Wrapper like any other React component – except they're styled! render( <Wrapper> <Title> Hello World! </Title> </Wrapper> ); ``` - Sass / Less 這里使用 Sass 作為 CSS 預處理器，這也是 Antd 和 BootStrap 的樣式解決方案。 樣式文件系統結構： ```js styles/ _variables.scss(各種變量以及可配置設置) _mixins.scss(全局 mixins) _functions.scss(全局 functions) components/ Button. style.scss(組件單獨樣式) ... ``` 注意文件以下劃線開頭命名是因為以`_`開頭命名的文件表示其不能單獨使用（無法編譯為單獨的 css 文件），只能作為模塊導入，導入時可不帶`_` # 創建自己組件庫的色彩體系 - 系統色板 = 基礎色板 + 中性色板 - 產品色板 = 品牌色 + 功能色板 Bootstrap 的色彩體系：  本組件庫的色彩體系：  ```css // 中性色彩 $white: #fff !default; // !default 關鍵字表示定義該變量后其不會被重新賦值 $gray-100: #f8f9fa !default; $gray-200: #e9ecef !default; $gray-300: #dee2e6 !default; $gray-400: #ced4da !default; $gray-500: #adb5db !default; $gray-600: #6c757d !default; $gray-700: #495057 !default; $gray-800: #343a40 !default; $gray-900: #212529 !default; $black: #000 !default; // 基礎色板 $blue: #0d6efd !default; $indigo: #6610f2 !default; $purple: #6f42c1 !default; $pink: #d63384 !default; $red: #dc3545 !default; $orange: #fd7e14 !default; $yellow: #fadb14 !default; $green: #52c41a !default; $teal: #20c997 !default; $cyan: #17a2b8 !default; // 系統色板 $primary: $blue !default; $secondary: $gray-600 !default; $success: $green !default; $info: $cyan !default; $warning: $yellow !default; $danger: $red !default; $light: $gray-100 !default; $dark: $gray-800 !default; ``` # 字體解決方案 ```css // 無襯線體(sans-serif) $font-family-sans-serif: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, "Noto Sans", sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji" !default; // 等寬字體 $font-family-monospace: SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace !default; // 設置默認字體 $font-family-base: $font-family-sans-serif !default; ``` ```css // 字重 $font-weight-lighter: lighter !default; $font-weight-light: 300 !default; $font-weight-normal: 400 !default; $font-weight-bold: 700 !default; $font-weight-bolder: bolder !default; $font-weight-base: $font-weight-normal !default; // 行高 $line-height-base: 1.5 !default; $line-height-lg: 2 !default; $line-height-sm: 1.25 !default; // 標題大小 $h1-font-size: $font-size-base * 2.5 !default; $h2-font-size: $font-size-base * 2 !default; $h3-font-size: $font-size-base * 1.75 !default; $h4-font-size: $font-size-base * 1.5 !default; $h5-font-size: $font-size-base * 1.25 !default; $h6-font-size: $font-size-base !default; ``` # normalize.css [https://github.com/necolas/normalize.css](https://github.com/necolas/normalize.css) * Preserves useful defaults, unlike many CSS resets. * Normalizes styles for a wide range of elements. * Corrects bugs and common browser inconsistencies. * Improves usability with subtle modifications. * Explains what code does using detailed comments. 將其添加到組件庫的根樣式文件即可。