React项目中三元表达式渲染的元素SCSS样式不生效如何解决？

问题原因 #

• 核心问题是类名拼写不匹配：你在组件代码中给展示数据的div设置的类名为data-conatiner，存在拼写错误，和SCSS中定义的样式选择器.data-container（拼写正确）完全不一致，导致样式无法命中对应元素，自然不会生效。
• 次要注意点：你组件内导入的是../Styles/City.css，如果你的样式源码是SCSS格式，需要确认项目的编译配置是否会自动将SCSS编译到对应路径的CSS文件中，若没有对应编译规则，直接导入SCSS文件即可（修改为import '../Styles/City.scss'，前提是项目已经配置了scss-loader等相关编译依赖）。

修复方案 #

1. 修正组件内的类名拼写，将

<div className="data-conatiner" >

修改为

<div className="data-container" >

2. 确认样式文件导入路径和后缀匹配实际的文件即可。

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