React中针对className的CSS不生效，无法修改location元素的文字颜色与字号

从你给出的代码来看，.weather-location-container .location的写法、DOM类名匹配逻辑都是正确的，其余已有CSS规则都能生效，说明CSS文件整体加载正常，不生效基本是以下几类常见原因导致的：

• 优先排查热更新失效或浏览器缓存
  这是新增CSS规则不生效的最高频原因。已有旧规则能正常加载，说明你新写的这条规则没有被开发服务器的热更新推送到浏览器，或是被浏览器缓存的旧版CSS拦截。直接按Ctrl+Shift+R（Windows）/Cmd+Shift+R（Mac）硬刷新页面，或是重启React开发服务器重新加载CSS即可解决绝大多数这类问题。

• 用浏览器开发者工具精准定位问题
  按F12打开开发者工具，选中页面上的London文字对应的.location元素，查看右侧Styles面板：

  • 如果面板里完全找不到你写的.weather-location-container .location规则，说明这条新规则确实没有被加载，回到上一步排查缓存和热更新问题，同时可以检查CSS文件里这条规则是否被误写进了注释块，或是类名前打了中文句号、前后带空格这类隐蔽的语法错误。
  • 如果规则出现但被划线标记，说明优先级被其他更高的规则覆盖，查看是哪个样式覆盖了它，要么调整选择器优先级，要么修改对应覆盖规则即可。

• 确认DOM类名的拼写细节
  检查实际运行的代码里，类名是否有拼写错误、多余空格，比如把weather-location-container错写为weahter-location-container，或是把location写成locatoin，这类错误从给出的代码片段里很难发现，要以浏览器开发者工具里实际渲染的DOM类名为准。

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