Question

我将我的node js + react应用程序部署到了heroku，由于某些奇怪的原因，一些CSS样式已被引导样式所覆盖。（字体也是如此）在开发中效果很好。我为每个react组件使用单独的css文件。

可能是什么原因？我注意到此问题仅与App.css文件有关。引导规则已覆盖那里的规则。

您将如何建议调试呢？

Answer 1

有一些选择...

首先请确保您链接到自己样式之前的引导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元素。

使用继承也可以使样式更加重要。如果您在li标记内有.nav-item类nav，则使用nav>.nav-item将应用样式。

css中还有一个!important标志，因此您可以使用text-align: center !important。这将覆盖所有样式。就是说，!important是一种不良的开发实践，所以我不建议您使用它，尤其是当有多个开发人员在您的项目上工作时。看到这个answer