React18中className使用问题？

Question

在React18中使用className添加样式，为什么不能生效呢？

// App.js
import styles from'./App.css';

<div className={styles.picture}>xxx</div>

// App.css
.picture {
  width: 200px;
  height: 200px;
  background-color: green;
}

className并没有添加进去，React18中为什么这样写不可以呢，之前的React版本这么使用都是可以的

Answer 1

大家可以看看这个：https://github.com/oven-sh/bun/issues/792

Answer 2

<div className="picture">xxx</div>

Answer 3

这样写并不是react的能力 而是css module的能力 可能你现在的项目里没有配置 所以不支持

Answer 4

遇到这种和框架相关的问题可以优先去 issue 中查找，因为大多问题都有人提过了，意味着其中可能包含解决方案或原因

本文参与了SegmentFault 思否面试闯关挑战赛，欢迎正在阅读的你也加入。

Answer 5

自定义组件不能直接通过 className 来设置 class。组件上设置className，React把classname设置成了props，如下图：

解决方案之一就是子组件获取props.classname，然后设置在子组件上。