CSS 样式显示不正确（firebase）答案

【问题标题】：CSS styles not displaying properly (firebase)CSS 样式显示不正确（firebase）
【发布时间】：2021-08-19 19:09:08
【问题描述】：

我在 Firebase 中部署了一个 SPA，而 CSS 样式只有在我刷新浏览器时才看起来不错。这是显示问题的简短视频：

https://www.youtube.com/watch?v=dIuQ-axizj8

我的 firebase.json：

{
  "hosting": {
    "public": "build",
    "ignore": ["firebase.json", "**/.*", "**/node_modules/**"],
    "rewrites": [
      {
        "source": "**",
        "destination": "/index.html"
      }
    ]
  }
}

似乎该问题仅与背景图像有关，因为应用程序的其余部分具有正确的样式。这是我的网站，您可以验证问题：https://ligafiferos.web.app/61159918604c7700164465bd/players

提前谢谢你！

【问题讨论】：

控制台中是否出现任何错误？比如 CSS not found 之类的
不，我只有这个问题：页面或脚本正在访问 navigator.userAgent、navigator.appVersion 和 navigator.platform 中的至少一个。在 Chrome 的未来版本中，用户代理字符串中可用的信息量将减少。要解决此问题，请将 navigator.userAgent、navigator.appVersion 和 navigator.platform 的使用替换为特征检测、渐进增强或迁移到 navigator.userAgentData。请注意，出于性能原因，仅显示对其中一个属性的第一次访问。

标签： css reactjs firebase mern

【解决方案1】：

不要在.card（在Card.css 中定义）上使用background: white;，使用background-color: white（这是您要更改的内容）。

更改快捷方式属性background 会更改所有background-* 属性（包括background-image，设置为initial），然后您取决于CSS 加载的顺序是否显示背景（这可能取决于很多事情）。

如果 Card.css 在 PlayItem.css 之后被加载（出于某种原因），那么它将取消 .elche-item__content 属性 background-image 并将其替换为 initial

【讨论】：

非常感谢！这对我有用！ :)
@doubting 如果这是一个好的解决方案，不要忘记将其标记为其他人看到的解决方案
嘿，舒尔。 Gracias y buen floro。