# 样式方案的选择 现有的一些样式方案： - 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. 将其添加到组件库的根样式文件即可。