React使用Navbar.module.css报错：style仅支持对象而非字符串求助

你犯了一个CSS Modules的典型使用错误：

• CSS Modules导出的styles对象里的属性是类名字符串，而React的style属性要求传入的是内联样式对象（比如{ color: 'red', fontSize: '16px' }这种格式），这就是报错的核心原因。

正确的写法应该把模块里的类名放到className属性中，替换你原来硬写的'navbar'：

import styles from './Components/Navbar.module.css'

// 正确用法
<div className={styles.navbar}>
  {/* 导航栏内容 */}
</div>

如果需要同时使用多个类名（比如全局类+模块类），可以用这两种方式实现：

// 模板字符串写法
<div className={`global-navbar ${styles.navbar}`}>
  {/* 内容 */}
</div>

// 数组拼接写法（React 17+ 适用）
<div className={['global-navbar', styles.navbar].join(' ')}>
  {/* 内容 */}
</div>

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