样式

样式中的像素值

Tips：React 会自动对 width、height 等属性添加 px。

// Result style: '10px'
<div style={{ height: 10 }}>
  Hello World!
</div>

// Result style: '10%'
<div style={{ height: '10%' }}>
  Hello World!
</div>

注意：有些属性除了支持 px 为单位的像素值，还支持数字直接作为值，此时 React 并不添加 px，如 lineHeight，完整列表。

classnames 库的使用

该库主要用来给组件动态设置 className。

import cx from 'classnames';
<div className={cx(
  'header-left',  // 最简单的类名
  {loading: props.loading })}, // 属性值为true，才生成类名
  `button-${props.color}`,  // 传入属性生成动态类名，注意不传也会生成
  {[`ts-${props.type}`]: props.type} // 属性值为true，才生成动态类名
/>

强制：不要使用类似 clazz 等方式传入父组件的类名，直接将 className 挂到 props 上往下传递，通过 cx 或 className 动态取都可以。

推荐：库名用 cx 来命名，防止与 className 发生歧义。

cssModules

cssModules 没有在项目中实际应用，暂不做介绍。