react样式引用的几种方式

温馨提示：react各个组件样式会挂在body内，各个样式之间class命名尽量进行区分，或者加范围限制。同名样式相互冲突将会是自造陷阱~~

react 样式写法有几种，以下列举常用方式：

1. 导入css、less等文件

// js部分
import React from 'react';

import './index.css'

export default () => {
  return (
    <>
      <p>原来颜色</p>
      <p className="red">引用后样式</p>
		
	  // 变量控制
	  <p className={true ? "red" : ''}>引用后样式</p>
	  <p className={true && "red"}>引用后样式</p>

	  // 多个class
	  <p className={`class01 class02 ${true && "red"}`}>引用后样式</p>
    </>
  )
};

// css文件
.red{
  color: red;
}

2. 函数页声明样式 引入

import React, {useState} from 'react';

export default () => {
  const [visible] = useState(true);
  
  const style = {'color': 'red'};
  const style02 = {'background': '#999'};

  return (
    <>
      <p>原来颜色</p>

      {/* 直接写 */}
      <p style={{'color': 'red'}}>引用后样式</p>
      <p style={{'color': visible && 'red'}}>引用后样式</p>

      {/* 引用样式 */}
      <p style={style}>引用后样式</p>

      {/* 变量控制样式 */}
      <p style={visible && style}>引用后样式</p>

      {/* 多个样式 */}
      <p style={{...style, ...style02}}>引用后样式</p>
    </>
  )
};

3.多个样式引用写法

import React from 'react';

export default () => {
  const style = {'color': 'red'};
  const style02 = {'background': '#999'};

  return (
    <>
      <p>原来颜色</p>
      
      // 多个class
	  <p className={`class01 class02 ${true && "red"}`}>引用后样式</p>
	  <p className={`class01 class02 ${true ? "red" : ""}`}>引用后样式</p>

      {/* 多个样式 */}
      <p style={{...style, ...style02}}>引用后样式</p>
    </>
  )
};

---

推荐活跃的同学加一下QQ群：152693086（大前端）不做大群，欢迎加入。