react常见的样式的使用

react常见的样式的使用

1. 引入css样式或者是sass样式

在css文件中写入样式

.title {
  color: red;
}

在组件中引入

import './style.css'

使用

<h2 className="title">h2</h2>

2.引入styled

定义

import styled from 'styled-components'

const Myh1 = styled.h1`
  font-size:88px;
  color:green
`

使用

<Myh1>样式使用</Myh1>

3.在state里面定义样式对象

定义:

state = {
    flag: true,
    obj: {
      color: 'green', fontSize: '88px',
      background: "red"
    }
  }

使用

 <h1 style={this.state.obj}>color</h1>

4.样式控制

引入classNames

import classNames from 'classnames'

在state里面设置样式控制的条件

  state = {
    flag: true
  }

使用

<h1 className={classNames({ title: true })}>  样式使用</h1>