React项目pages目录下div组件不显示及页面CSS添加问题咨询

问题1：首页组件内容不显示解决方法 #

• 首先修正组件内的无效属性写法：你直接在div标签上写z-index="1"不符合React行内样式规范，属于无效属性会被忽略。React行内样式必须通过style属性传入驼峰命名的样式对象，可参考以下修正写法（加背景色方便排查元素是否被遮挡）：

function BUStudentLinkHome() {
  return <div style={{ zIndex: 1, background: '#f5f5f5', minHeight: '200px' }}>Home Page</div>;
}

export default BUStudentLinkHome;

• 排查Layout组件样式：检查Layout组件的内容容器是否设置了overflow: hidden、height: 0、opacity: 0这类会隐藏内容的属性，或者navbar、profile组件使用了固定/绝对定位遮挡了下方的内容区域。
• 确认React Router版本：如果你使用的是React Router v6，原有写法已经失效，v6已经废弃Switch和exact属性，需要改成以下写法：

import { Routes, Route } from 'react-router-dom'

function App() {
  return (
    <Layout>
      <Routes>
        <Route path="/" element={<BUStudentLinkHome />} />
      </Routes>
    </Layout>
  );
}

问题2：React页面样式编写方案 #

三种方案都可行，可根据场景选择：

• 行内样式：仅适合编写少量和组件逻辑绑定的动态样式，比如根据状态动态修改的宽高、颜色，缺点是不支持伪类、媒体查询，代码冗余度高。
• 单独CSS文件引入：适合页面级通用样式编写，新建和页面对应的CSS文件比如BUStudentLinkHome.css，在组件顶部import './BUStudentLinkHome.css'即可使用，注意给类名加专属前缀避免全局类名冲突。
• 可选优化方案：如果担心类名冲突可以使用CSS Modules，新建BUStudentLinkHome.module.css，引入时用import styles from './BUStudentLinkHome.module.css'，使用时<div className={styles.你的类名}>，工具会自动生成唯一类名不会和全局冲突；如果是动态样式多的场景也可以使用styled-components等CSS-in-JS方案。

内容的提问来源于stack exchange，提问作者So May See Macy