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>
            </>
        )
    }
}