样式方案

本文介绍了在项目中使用样式的一些最佳实践。

全局样式

对于整个项目的全局样式，统一定义在 src/global.scss 文件中：

  1. // 引入默认全局样式
  2. @import '@alifd/next/reset.scss';
  4. body {
  5.   -webkit-font-smoothing: antialiased;
  6. }

然后在入口脚本 src/index.jsx 里引入样式文件即可：

  1. import React from 'react';
  2. import ReactDOM from 'react-dom';
  4. import './global.scss';
  6. import router from './router';
  8. ReactDOM.render(router(), mountNode);

局部样式

在页面或者组件中我们推荐使用 CSS Modules 的方式添加样式，可以有效解决样式冲突等问题，书写方式如下：

首先在组件目录下新建 index.jsx 和 index.module.scss 两个文件：

  1. // ./components/UserCard/index.module.scss
  2. .userCard {
  3.   color: green;
  4. }
  6. .nick {
  7.   font-size: 12px;
  8. }

在 jsx 文件中引入对应的样式文件，并将 className 与对应样式关联：

  1. // ./components/UserCard/index.jsx
  2. import styles from './index.module.scss';
  4. function UserCard(props) {
  5.   return (
  6.     <div className={styles.userCard}>
  7.       <span className={styles.nick}>{props.nick}</span>
  8.     </div>
  9.   );
  10. }

使用该方案之后，上文中的 nick、userCard 这种 className 都会被编译为唯一性的名字，避免因为重名 className 而产生样式冲突。