ReactDay5—CSS

内联方式

一切都写死了,不能动态修改某些样式

export class App extends PureComponent {
  constructor() {
    super()

    this.state = {
      titleSize: 30
    }
  }

  addTitleSize() {
    this.setState({ titleSize: this.state.titleSize + 2})
  }

  render() {
    const { titleSize } = this.state

    return (
      <div>
        <button onClick={e => this.addTitleSize()}></button>
        <h2 style={{color:"red", fontSize:`${titleSize}px`}}>xixi</h2>
        <p style={{color:"red", fontSize:"30px"}}>I'm contenu</p>
      </div>
    )
  }
}

普通CSS(不建议)

import ‘xxx.css’

问题在于普通CSS没有自己的作用域容易造成冲突,作用于全局.

CSS Modules

将CSS文件名改为’xxx.module.css’.可以实现局部作用域

文件中导入时需要自定义名导入使用,如import appStyle from “./App.module.css”

每个样式使用则按照{appStyle.title}

import appStyle from "./App.module.css"

export class App extends PureComponent {
  render() {
    return (
      <div>
        <h2 className={appStyle.title}>Title</h2>
        <p className={appStyle.content}>This is content</p>
      </div>
    )
  }
}

export default App

CSS in JS

由第三方库来支持:

• styled-components
• emotion
• glamorous

import styled from "styled-components";
import * as vars from './variable' 

//5可以从一个单独的文件中引入变量
// export const primaryColor = "#ff8800"
// export const secondColor = "#ff7788"
// export const fontSize = "25px"



//1.基本使用
export const AppWrapper = styled.div`
  .footer{
    border: 1px solid red;
  }
`

//2.子元素单独抽取到一个样式组件
//3.接受外部传入的props
export const SectionWrapper = styled.div.attrs(props => { //4.通过attrs给标签模版字符串提供属性
  return {
    tColor: props.color || "blue"
  } 
})` 
    border: 1px solid red;

  .title {
    font-size: ${props => props.size};
    color: ${props => props.tcolor};

    &:hover {
      background-color: black;
    }
  } 

  .content {
    font-size: ${vars.fontSize};
    color: ${vars.primaryColor};
  }
`

//6.样式的继承
const HYbutton = styled.button`
  padding: 8px 30px;
  border-radius: 5px;
`

export const HYWarnButton = styled(HYbutton)`
  background-color: red;
  color:#fff;
`

动态添加类

classnames外部包

import React, { PureComponent } from 'react'
import classNames from 'classnames'


export default class App extends PureComponent {
  constructor () {
    this.state = {
      isbbb:true,
      isccc:true
    }
  }
  render() {
    const { isbbb, isccc } = this.state
    const classList = ["aaa"]
    if (isbbb) classList.push("bbb")
    if (isccc) classList.push("ccc")
    const classname = classList.join(" ")


    return (
      <div>
        {/* 第一种方式:三元运算符直接写 */}
        <h2 className={`aaa ${isbbb ? 'bbb': ''} ${isccc ? 'ccc':' '}`}>哈哈</h2>

        {/* 第二种方式:写入一个列表 */}
        <h2 className={classname}></h2>

        {/* 第三种:使用classnames包 */}
        <h2 className={classNames("aaa", {bbb:isbbb, ccc:isccc})}></h2>

      </div>
    )
  }
}