CSS in React

 1) 普通方式

内联style + 引入CSS文件

条件 className: classnames, clsx

    1> classnames

       用法: const itemClassName = classNames("list-item", { published: isPublished });        

                 <div key={id} className={itemClassName}>

                or

            

2) CSS-Module 和Sass

BEM: 规范(主观上)

CSS-module 使用方法：

将.css 后缀 改为.module.css

在tsx文件中使用 import styles from "./xx/xxx.module.css";

然后在JSX片段中使用  <div key={id} className={styles["list-item"]}>

来引入

如果要结合classNames来使用，如下:

const itemClassName = classNames({

[styles["list-item"]]: true,

[styles.published]: isPublished,

});

Sass:(less & sass 是CSS预处理语言)

后缀需改为.scss

允许嵌套

npm install sass --save

3) css-in-js解决方案: Styled-Components和Styled-jsx

1> styled-components

为在js中写css样式 提供方便

install in JS projects:

npm i -D styled-components@5.3.10

install in TS projects:

npm i -D styled-components@5.3.10 @types/styled-components

import in project:

import styled from "styled-components";

直接可以定义组件

type ButtonPropsType = {

primary?: boolean;

};

const Button = styled.button`

background: transparent;

border-radius: 3px;

border: 2px solid #bf4f74;

color: #bf4f74;

margin: 0 1em;

padding: 0.25em 1em;

${(props: ButtonPropsType) =>

props.primary &&

css`

background: palevioletred;

color: white;

`}

`;

const Container = styled.div`

text-align: center;

`;

然后使用:

<Container>

<Button>按钮</Button>

<Button primary>按钮</Button>

</Container>

这里有个语法: button`xxx`, 这里打印出来的会是一个数组[]，里面只有一个元素,为xxx。但是这个数组还有其他属性 比如说raw,但是raw数组也是xxx

e.g.

2> styled-jsx

类似，不过因为ts中语法要求比较严格，诸如jsx 属性，在ts中不被认识，得自己去扩展

3> emotion

跟styled-components语法基本一样