React组件样式导入报错：Cannot read property 'TodoComponent' of undefined

咱们先揪出问题的核心：你遇到的报错是因为styles变量在App组件里是undefined，根本原因是styles.js没有正确导出样式对象，同时App.jsx的导入语法和导出方式不匹配，导致拿不到样式数据。

下面是具体的解决步骤：

第一步：修正styles.js的导出语法 #

你目前的styles.js只定义了styles变量，但没有把它导出给其他文件使用，这是关键问题。有两种导出方式可选，对应不同的导入写法：

选项1：使用默认导出（推荐） #

修改你的styles.js，在末尾添加默认导出语句：

var TodoComponent = {
  width: "300px",
  margin: "30px auto",
  backgroundColor: "#44014C",
  minHeight: "200px",
  boxSizing: "border-box"
};
var styles = {
  TodoComponent: TodoComponent,
  // 其他样式对象...
};

// 添加这行默认导出
export default styles;

然后把App.jsx里的导入语句改成默认导入：

// 替换原来的{styles}命名导入
import styles from "./styles.js";

选项2：使用命名导出 #

如果你更倾向于命名导入的方式，修改styles.js的导出为命名导出：

var TodoComponent = {
  width: "300px",
  margin: "30px auto",
  backgroundColor: "#44014C",
  minHeight: "200px",
  boxSizing: "border-box"
};
// 直接用export const定义并导出styles
export const styles = {
  TodoComponent: TodoComponent,
  // 其他样式对象...
};

这种情况下，App.jsx里的命名导入可以保持不变：

import { styles } from "./styles.js";

第二步：验证修改效果 #

完成上述修改后，重新运行项目，你会发现之前的报错消失了，style={styles.TodoComponent}能够正确读取到你定义的样式对象。

额外补充说明 #

• 你之前尝试的export styles...是无效的ES6导出语法，正确的导出要么用export default（对应默认导入），要么用export const/let（对应命名导入）。
• 你的webpack配置里虽然开启了CSS modules，但你这里是用JS对象写的内联样式，和CSS modules功能无关，所以这部分配置不会影响当前问题的解决。

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