关于前端: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> </> ) }}