16-React中使用css

一 内联样式

 

/*
 * @Description: 
 * @Version: 2.0
 * @Autor: sun
 * @Date: 2022-10-17 22:53:31
 * @LastEditTime: 2022-10-19 23:11:13
 */
import React, { PureComponent } from 'react'

export default class App extends PureComponent {
  constructor(props) {
    super(props)
    this.state = {
      color: "purple"
    }
  }
  render() {
    const pStyle = {
      color: "orange",
      textDecroation:"underline"
    }
    //优点： 1 内联样式不会有冲突  2 可以动态获取constructor里面参数
    //缺点： 1 写法需要驼峰标识 2 某些样式没有提示  3 大量代码 样式混乱  4 某些样式无法书写比如伪类
    return (
      <div>
        <h2 style={ {fontSize: "50px",  color: this.state.color} } >我是标题</h2>
        <h3 style={ pStyle }>内联样式</h3>
      </div>
    )
  }
}

二 普通样式

/*
 * @Description: 
 * @Version: 2.0
 * @Autor: sun
 * @Date: 2022-10-19 23:14:06
 * @LastEditTime: 2022-10-19 23:26:21
 */
import React, { PureComponent } from 'react'
import './style.css'

export default class Profile extends PureComponent {
  render() {
    return (
      <div className='profile'>
        <h2 className='title'>我是profile</h2>
        <ul className="settings">
          <li>测试1</li>
          <li>测试2</li>
          <li>测试3</li>
        </ul>
      </div>
    )
  }
}

 三 css-modules

/*
 * @Description: 
 * @Version: 2.0
 * @Autor: sun
 * @Date: 2022-10-19 23:13:59
 * @LastEditTime: 2022-10-19 23:49:36
 */
import React, { PureComponent } from 'react'
import style from './style.modules.css'

export default class Home extends PureComponent {
  render() {
    console.log(style)
    return (
      <div>
        <div className={ style.title }>测试牛牛牛牛牛</div>
        <h2 className={ style.sule }>我是home的标题</h2>
        <div>
          <div className="title">轮播图</div>
        </div>
      </div>
    )
  }
}

 四 css-in-js

 

/*
 * @Description: 
 * @Version: 2.0
 * @Autor: sun
 * @Date: 2022-10-20 00:09:42
 * @LastEditTime: 2022-10-20 00:51:10
 */
import React, { PureComponent } from 'react'
// import aaStyle from './cssInJS.css'

import styled from 'styled-components'

const HomeWrapper = styled.span`
  font-size: 50px;
  color: darkgreen;
  &:hover {
    color: red;
  }
`

const TitleWrapper = styled.h2`
  text-decoration: underline;
  color: orange;
`

export default class cssInJS extends PureComponent {
  render() {
    return (
      <HomeWrapper>
        <TitleWrapper><h2>cssInJS</h2></TitleWrapper>
        <div className='banner'>
          测试数据
        </div>
        <span>span的div值</span>
      </HomeWrapper>
    )
  }
}