React项目中通过id选择器设置CSS样式不生效问题求助

问题原因 #

你使用的是CSS Module模块化样式方案，默认会对CSS文件内的类、id选择器追加唯一哈希后缀实现样式隔离。你JSX代码中直接写的id="phoneNumber"是固定字符串，而CSS文件里的#phoneNumber编译后会变为类似#phoneNumber_abc123的带哈希后缀格式，二者无法匹配，因此id对应的样式不会生效。

解决方案 #

• 方案1（最推荐，符合CSS Module设计规范）：放弃使用id选择器写样式，改为新增类选择器实现对应效果，和你已有的.footerNav使用逻辑一致。
• 方案2（需要保留id选择器的场景）：在CSS文件中将id选择器声明为全局样式，避免被追加哈希后缀：

.footerNav {
  width: 50%;
  display: flex;
}

:global(#phoneNumber) {
  font-size: 2rem;
}

• 方案3（需要保留id模块化特性的场景）：JSX中的id属性从引入的style对象中取值，不要写固定字符串：

<div className={style.footerNav} id={style.phoneNumber}>
  999-999-9999
</div>

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