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;
内部样式
通过定义样式变量的方式
外部样式
通过引入样式文件的方式