React开发：CSS文本样式不生效、react-dom导入及render报错求助

1. ReactDOM导入报错、render方法读取undefined错误 #

错误原因 #

React 18+ 版本的react-dom不存在ReactDOM具名导出，使用import { ReactDOM } from "react-dom"导入得到的是undefined，后续调用ReactDOM.render()时自然触发"Cannot read properties of undefined (reading 'render')"报错。

修复方法 #

根据你使用的React版本选择对应写法：

• React 18及以上版本（当前主流版本），替换index.js内容为：

import React from "react"
import { createRoot } from "react-dom/client"
import App from "./App"
import "./index.css"

const root = createRoot(document.querySelector("#root"))
root.render(<App />)

• React 17及以下旧版本，把导入语句改成默认导入（去掉花括号）即可，原有render写法不用改：

import ReactDOM from "react-dom"

2. CSS文本颜色设置不生效 #

错误原因 #

你仅给body标签设置了color: white，文本颜色是可继承属性，但React应用挂载的#root节点、内部div元素如果存在默认样式/高优先级样式覆盖，就会出现背景色生效、文字颜色不生效的问题。

修复方法 #

修改index.css，把根节点纳入样式作用范围，同时可补全视口高度相关配置避免背景显示异常：

body, #root {
  margin: 0;
  padding: 0;
  min-height: 100vh;
  background: black;
  color: white;
}

如果要彻底避免其他元素默认样式干扰，可以加全局样式重置：

* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

内容的提问来源于stack exchange，提问作者Gift