React中如何同时应用CSS模块类与全局CSS类？

你之前的写法有个小错误——给全局样式的类名加了多余的.符号，直接去掉.就可以正常生效了：

<div className={`${styles.textContainer} animate`}>

为啥要这么写？ #

• CSS模块会自动把类名转成唯一哈希值（比如styles.textContainer最终会变成textContainer_xyz789这种格式），所以必须通过styles.类名的方式引用。
• 像animate.scss这种全局样式表，里面的类名不会被哈希处理，直接写类名字符串就行，.是CSS选择器里的语法，不是类名本身的一部分，加了反而会被当成类名的一部分，导致样式不生效。

其他更清晰的写法 #

如果要加的类名比较多，用数组拼接的方式可读性更好：

<div className={[styles.textContainer, 'animate'].join(' ')}>

或者用classnames库来简化（需要先安装）：

import classNames from 'classnames';

<div className={classNames(styles.textContainer, 'animate')}>

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