React CSS

Posted on Edited on

方案

可以选择的样式方案根据写法主要分为三种：第一种是常规 CSS（regular CSS），即原生 CSS 和各种预处理语言；第二种是在 JS 侧写样式的 CSS in JS 方案，例如 styled-components；第三种是在 HTML 中写工具类，由 CSS 框架生成对应样式的方案，例如 Tailwind CSS 。

CSS Modules

CSS Modules 是解决命名空间问题的一种方案，它可以基于指定的规则生成选择器名称，无需开发者遵守严格的规范，同时也避免对全局样式造成污染。

以下是一个简单的例子，原始代码是这样的：

1
2
3
.test {
  color: red;
}
1
2
3
import styles from "index.less";
// ...
<div className={styles.test} />;

经过转换后，成为了这样:

1
2
3
4
5
6
7
._xxxxxx {
   color: red;
}

var modules_xxx = {"test":"_xxxxxx"};
// ...
<div className={modules_xxx['test']} />

通过对选择器添加 hash 值等方法，使选择器不会与其他地方产生冲突。

emotion

可以模块化 css

1
yarn add @emotion/styled @emotion/react

写法,注意首字母大写

1
2
3
4
5
6
7
8
const Container = styled.div`
  display: flex;
`;

// 注意styled后只能跟原生元素,如果要修改antd,加括号
const ShadowCard = styled(Card)`
  width: 40rem;
`;

antd

老版本 antd 和新版本 react-script 有冲突会报 less 警告.可以将引入 antd.css 改为 antd.min.css 即可解决.

Grid 布局和 flex 布局

区别:

  1. 一维布局: flex;二维布局: grid;
  2. 从内容出发用 flex,布局出发用 grid.

内容出发:先有一组数据,数量不固定,希望均匀分布在容器中,由内容自己的大小占据空间.
布局出发: 先规划网格,再把元素往里面填充.