react中如何给为一个元素规定多个类，以及给元素添加行内样式，内部样式和外部样式

为一个元素规定多个类(静态添加)

<div className={`tipsTxt tipsStyle`}>通过es6的模板字符串方式添加类名</div>

<div className="errorContent btnStyle">通过字符串，空格分隔类名添加类名</div>

为一个元素规定多个类(动态添加)

<li className={`sideBar-item ${location.pathname === "/docs" ? "sideBar-item-current" : "" }`}>使用ES6 模板字符串:动态添加className </li>

<li className={["sideBar-item", location.pathname === "/tutorial" ? "sideBar-item-current" : "",].join(" ")}>把数组转换成以空格分隔的字符串添加类名</li>

行内样式

通过两个大括号方式{{ }}添加样式

import { useNavigate } from "react-router-dom";
import errorImg from "../../assets/images/404.jpg";
import "./404.scss";

// 内部样式
let errorWrap = {
  width: "100%",
  height: "100vh",
  display: "flex",
  flexDirection: "column",
  overflow: "hidden",
  position: "relative",
};

function NotFound() {
  const navigate = useNavigate();

  function goHome() {
    navigate("/");
  }

  return (
    <>
      <div style={errorWrap}>
        <img style={{ width: "100%", height: "100vh" }} alt="" src={errorImg} />
        <div className="errorContent btnStyle" onClick={goHome}>
          返回首页
        </div>
        <div className={`tipsTxt tipsStyle`}>你的路径是不是有误？</div>
      </div>
    </>
  );
}

export default NotFound;

内部样式

通过定义样式变量的方式

外部样式

通过引入样式文件的方式