全局样式/局部样式

  • 全局样式

样式文件名为： xxx.css/scss/less
导入：import ‘xxx.css/scss/less’
类名：就是自定义类名

  • 局部样式

样式文件名为： xxx.module.css
导入：import styles from ‘xxx.module.css’
使用：<p className={styles.container}></div>
类名：组件名_自定义类名__hash转base64值取前5位，用于防止缓存
image.png

  1. import React from 'react'
  2. import Hello from './Hello'
  3. import './app.css' // 全局样式
  4. import Styles from './hello.module.css' // 局部样式
  5. class App extends React.Component {
  6.     render() {
  7.         return (
  8.             <div>
  9.                 App
  10.                 <p className='box'></p>
  11.                 <p className={Styles.container}></p>
  12.                 <Hello/>
  13.             </div>
  14.         )
  15.     }
  16. }

cra中使用sass

  1. 安装两个插件 node-sass 和 sass-loader

    $ yarn add node-sass sass-loader -D $ cnpm i node-sass sass-loader -D

cra中使用less

  1. 安装两个插件 less 和 less-loader (用于less转css)

    $ yarn add less less-loader -D $ cnpm i less less-loader -D

  2. cra内置了css和sass配置，但是没有less的配置，

less和sass使用区别不大，去拷贝sass配置【位于config/webpack.config.js】给less即可
image.png
504-538 只需将sass改成less
还是报错并且报错中提到了版本就需要降版本

$ yarn add less-loader@7.3.0 -D $ cnpm i less-loader@7.3.0 -D

局部样式中写全局样式

:global 表示里面的类名都是全局类名
用于局部写全局

  1. :global{
  2.     .wrapper{
  3.         width: 100px;
  4.         height: 100px;
  5.         background: pink;
  6.     }
  7. }
  9. import style from './cpp.module.scss'
  10. <p className='wrapper'></p>

行内样式

react中不允许如下书写

  1. jsx也是虚拟DOM写法
  2. 虚拟DOM是一个对象模型，要求是对象的写法 ```html

    改为如下书写 

  1. ```javascript
  2. class App extends React.Component {
  3.     style ={
  4.         width:'100px',
  5.         height:'100px',
  6.         background:'red',
  7.     }
  8.     render() {
  9.         return (
  10.             <div>
  11.                 {/* 直接在元素上以对象的形式来进行样式的定义 */}
  12.                 <p style={this.style}></p>
  13.             </div>
  14.         )
  15.     }
  16. }

注意：样式属性要用驼峰命名法表示，如backgroundColor而不是background-color；fontSize而不是font-size

  1. <input type="text" style={{"backgroundColor":"yellow","color":"red"}} value={value}/>

使用classname第三方模块

类名处理

  1. 先安装classnames

    $ yarn add classnames -D $ cnpm i classnames -D

  2. 使用

    1. import React from 'react'
    2. import classname from 'classnames' // 导出的classname是一个函数
    3. class App extends React.Component {
    4.  render() {
    5.      return (
    6.          <div>
    7.              <p className={classname({
    8.                  a: true,
    9.                  b: true,
    10.                  c: false,
    11.              })}></p>
    12.          </div>
    13.      )
    14.  }
    15. }
    16. export default App

    image.png

样式组件 - 了解

  1. 安装

    $ yarn add styled-components -D $ cnpm i styled-components -D

  2. 使用

    1. import React from 'react'
    2. import styled from 'styled-components' // todo1、引入
    3. console.log(styled)
    4. // todo2、创建样式组件
    5. const Container = styled.div`
    6.  width:100px;
    7.  height:100px;
    8.  background:${props=>props.color||'red'};
    9.      // 有color属性就用color属性的颜色，没有则用red
    10. `
    11. export default class App extends React.Component{
    12.  color='pink'
    13.  render(){
    14.      return(
    15.          <div>
    16.              {/* todo3、Container可以作为组件直接使用 */}
    17.              <Container/>
    18.              <Container color={this.color} />
    19.          </div>
    20.      )
    21.  }
    22. }

    image.png
    自动生成类名，不用在起类名