我将我的 node js + react 应用程序部署到 heroku，由于一些奇怪的原因，一些 css 样式被 Bootstrap 样式覆盖。 (字体也是)这在开发中工作得很好。 我为每个 react 组件使用单独的 css 文件。
可能是什么原因？我注意到这个问题只与 App.css 文件有关。那里的规则正在被 Bootstrap 规则覆盖。
您建议如何调试它？
最佳答案
有几个选项...
首先确保在您自己的样式之前链接到 bootstrap css
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css"/>
<link rel="stylesheet" href="mystyle.css"/>
CSS 根据其读取代码的重要性应用规则。包括更具体的选择器使 css 更有可能应用样式。将样式应用到 id 将应用到仅将样式应用到 a 元素。
使用继承也可以赋予样式更多的重要性。如果在 nav 标签内有一个 li 类 .nav-item，使用 nav>.nav-item将应用样式。
在 css 中还有一个 !important 标记，因此您可以使用 text-align: center !important。这将覆盖任何样式。也就是说，!important 是一种糟糕的开发实践，所以我不建议使用它，尤其是当有多个开发人员在您的元素上工作时。看这个answer
关于css - 在 heroku 部署后，引导 css 规则应用于自定义规则？，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/51634048/