关于前端:css-in-react

在 react 设置 css 款式有两种形式，style 和内部 css 引入

 style

以 {} 包裹一个 css 对象

<p style={{color:'blue'}}>test</p>

 css 引入

import "./ListItem.css"
<p className="color-red">listItem</p>

如果应用 css 引入，会在全局作用，为了防止这种状况呈现，能够应用以下办法

 css module

新建 ListItem.module.css, 在此文件中写 css 款式，而后组件中引入

// 组件引入
import React, {Component} from 'react'
import listItemCss from "./ListItem.module.css"
export default class ListItem extends Component {render() {
 return (
 <>
 <h1 className={listItemCss.test}>1111</h1>
 </>
 )
 }
}

 styled-components

装置

npm install styled-components --save 或 
yarn add styled-components

应用

import React, {Component} from 'react'
import styled from "styled-components"
const Button = styled.button`
 width:200px;
 height:50px;
 color:green;
 font-size:16px;
 `
export default class ListItem extends Component {render() {
 return (
 <>
 <Button> 点击 </Button>
 </>
 )
 }
}

 classNames 和 css module

装置

npm install classNames --save 或
yarn add classNames

应用

import React, {Component} from 'react'
import ListItemCss  from "./ListItem.module.css"
import classNames from "classnames"
export default class ListItem extends Component {render() {
 return (
 <> 
 <h1 className={classNames(ListItemCss.test,{[ListItemCss['font-normal']]:true})}>1111</h1>
 </>
 )
 }
}