React中css的使用

行内样式

<span style={{ color: "#710000", fontSize: 20 }}>
  Content
</span>

特点：

• style内容用双{}包裹
• 有-的地方要变成大写，例如font-size写成fontSize
• 多个样式时用逗号(,)连接，而不再用分号(;)
• 字符串用引号，数字不用

引入样式表

新建css文件
listItem.css

.title{
  font-size:20px;
  color:#710000
}

在要使用的地方引入

import './listItem.css'

使用时直接在className里写要引用的类名

<span className="title" >
   content
</span>

==注意，按这样写的样式文件默认是全局引用的，在别的文件中，即使没有引入，也可以使用==

若想要css文件只有引入的地方可以用，其他地方没引入不能用的话需要将css文件名加module

原文件名：listItem.css
新文件名：listItem.module.css

引入方式也不同

原引用方式：import './listItem.css'
新引用方式：import style from './listItem.module.css'

使用方式也不同

原使用方式：className="title"
新使用方式：className={style.title} 

==Ps:module并不是React特有的，css原生就有这种方法==

css module解决了以下问题

• 全局污染
• 命名混乱(不使用的话需要区分各个类名)
• 没有依赖管理

css module中可以写类似于scss的语句

.common{
    text-indent:2em
}
.title{
    composes: common;
    font-size: 20px;
    color: #710000
}

也可以以文件引入的方式写
新建common.module.css
引用文件中写入

.title{
    composes: common from 'common.module.css';
    font-size: 20px;
    color: #710000
}

效果与之前一致

补充知识点

• styled-component
• Classnames