10-添加样式

优质

小牛编辑

117浏览

2023-12-01

添加样式的方案

在 dva 中，所有的页面都是基于组件的。因此，我们希望样式依附于组件，不同组件的样式相互之间不会造成污染。

在 dva 中，我们推荐使用 CSS Modules 的解决方案。配合 webpack 的 css-loader 进行打包，会为所有的 class name 和 animation name 加 local scope，避免潜在冲突。

样式引入示例

参考 example 中的示例：

UserSearch组件：

// /components/Users/UserSearch.jsx
...
import styles from './UserSearch.less';
...

function UserSearch({
  form, field, keyword,
  onSearch,
  onAdd
  }) {
  ...
  return (
    <div className={styles.normal}>
      <div className={styles.search}>
        ...
      </div>
      <div className={styles.create}>
        <Button type="ghost" onClick={onAdd}>添加</Button>
      </div>
    </div>
  )
}

...

对应的UserSearch.less样式文件：

/* /components/Users/UserSearch.less */
.normal {
  display: flex;
  margin-bottom: 20px;
}

.search {
  flex: 1;
}

.create {
}

CSS Modules会给组件的className加上hash字符串，来保证className仅对引用了样式的组件有效，如styles.normal可能会输出为normal___39QwY。

className的输出格式可以通过webpack.config进行修改。

下一步，进入设计布局。