React uses sass for style isolation

install sass

npm i sass

Create a new arbitrary name.module.scss (no typo, just install sass, file name scss)

For example, I create a new app.module.scss file and use it in App.jsx

Put the following content in the created file

.u1{
    
    
    display: flex;
}

used in the file

//先引入进来
import styles from './app.module.scss'
export default App(){
    
    
	const arr = [
	    {
    
     id: 1, path: "/home", name: "首页" },
	    {
    
     id: 2, path: "/shoppingcar", name: "购物车" },
	    {
    
     id: 3, path: "/login", name: "登录" },
	    {
    
     id: 4, path: "/reg", name: "注册" },
	  ];

	return (
	    <>
	      <header>
	      /**在这里通过className属性,值为{导入起的名字.scss文件的类名}来得到当前css样式,通过scss文件可以起到样式隔离的效果,防止子组件样式被穿透*/
	        <ul className={
    
    styles.u1}>
	          {
    
    arr.map((item) => {
    
    
	            return <li key={
    
    item.id}>{
    
    item.name}</li>;
	          })}
	        </ul>
	      </header>
	    </>
	  );
	}

The effect of the page