React之样式设置

主要三种设置方式： 行内、classnames、模块化、styled-components

1 设置css行内样式

注意样式名称如果按照正常的css来写要加引号，如果写成注入fontSize可以不用加，但是属性值一定要加引号，最后外层要使用双大括号
格式：

{
     {
     fontSize："200px"}}
import React, {
      Component } from 'react'

export default class Cssline extends Component {
     
    render() {
     
        
        return (
            <div style={
     {
     fontSize:'100px',color:"red"}}>
                hello world
            </div>
        )
    }
}

2 模块化设置样式：
要注意css文件的命名格式： test.module.css
通过这种方式加入的样式，会自动在样式名后加入一段随机字母

import React, {
      Component } from 'react'
import common from './test.module.css'
export default class Cssline extends Component {
     
    render() {
     
        
        return (
            <div style={
     {
     fontSize:'100px',color:"red"}}>
                hello world
                <h1 className={
     common.good}>ddddd</h1>
            </div>
        )
    }
}

3 维护一个状态来调用css样式

import React, {
      Component } from 'react'
export default class State extends Component {
     
	// 在state中添加一个样式对象
    constructor(){
     
        super();
        this.state={
     
            styleObj:{
     
                fontSize:'100px'
            }
        }
    }
    render() {
     
    	// 这里return后面加了小括号，主要为了多条语句书写方便以及正常显示
        return (
        	// 调用状态
            <div style={
     this.state.styleObj}>
                test
            </div>
        )
    }
}

4 直接引入css样式

import React, {
      Component } from 'react'
// 引入外部的css文件
import "./b.css"
export default class Cssone extends Component {
     
    render() {
     
        return (
        // 这里的success  error 代表样式名称
            <div className='success'>
                行内样式
                <h1 className='error'>error</h1>
            </div>
        )
    }
}

5 利用插件classnames

首先安装插件clssnames

npm i classnames

我们利用它可以实现按条件渲染内容

import React, {
      Component } from 'react'
// 引入插件
import classNames from 'classnames'
// 引入样式
import styles from './style.css'
// 绑定样式
let cx = classNames.bind(styles);
export default class Classns extends Component {
     
    render() {
     
        // good 和 lower 代表绑定的样式中的属性，通过布尔值判断显示状态
        let names = cx({
     
            good:false,
            lower:true
        })
        return (
            <div>
                <h1 className={
     names}>SSS</h1>
            </div>
        )
    }
}

6 styled-commponents是针对React的一套css-in-js框架，可以是实现在js中写css代码

安装：

npm i styled-components

下面介绍简单的使用，其它使用方法可以去官网查阅

定义一个js文件：

import React from 'react'
import styled from 'styled-components'
// 定义所需的样式
const Container = styled.div`
    width:200px;
    height:200px;
    background:yellow;
    font-size:50px
`
// 别忘记导出
export{
     
    Container
}

在其它组件中调用它：

import React, {
      Component } from 'react'
// 解构出样式
import {
     Container} from './Stycom'
export default class Stylecomponents extends Component {
     
    render() {
     
        return (
        	// 直接作为一个组件调用，可以传参
            <Container>
                hello 
            </Container>
        )
    }
}

可以发现这种方式最终生成的样式名称是一个随机的字符串

也可以动态传值到js文件中，可以通过下面这种方式来接收数据

background:${
     props=>props.background};

在react中样式的设置方式基本就这么多，个人建议：如果涉及到按条件渲染，可以选择classnames插件；如果涉及动态传值渲染，可以选择styled-components。其它几种方式按需使用