如何在React引导中防止一个CSS文件覆盖另一个CSS文件

我正在使用React引导。到目前为止，我已经创建了两个不同的组件：注册和导航。每个组件都有自己的CSS样式表。我先创建了导航，然后注册。导航的外观和工作符合预期。然而，当我添加Register CSS时，现在导航从Register中获取了一些样式。我如何防止这种情况？我认为，通过为每个组件提供两个单独的样式表，我就不必担心它们会相互覆盖。我是否需要做些什么或添加什么，以便它们彼此保持分离？我的App.css文件除字体面属性外为空。没有其他CSS。我在过去使用过引导，但没有使用React引导，所以我可能遗漏了一些简单的东西

REGISTER.CSS

@font-face {
  font-family: "Mulish-Regular";
  src: url("../assets/fonts/static/Mulish-Regular.ttf");
}

div.card-body,
.flex-column.nav,
a {
  color: #212529 !important;
}

h5.card-header,
button.btn.btn-primary {
  color: rgba(255, 255, 255, 0.9);
  background-color: #2d3155;
}

button.btn-primary {
  margin: 1em;
}

a:hover,
a:focus {
  background: white !important;
  color: blue !important;
}

p.card-text > a {
  color: blue;
}

---

使用类而不是直接设置元素的样式，如果您有一个要应用于元素的通用样式，则只能通过名称选择元素，具有不同的文件不适用于css，css没有作用域，最后一个样式将覆盖以前的样式唯一的css名称与引导样式名称。非常感谢。如果你想改变答案，我可以标记它。如果你查看引导文件或任何css框架，你会看到使用元素名应用的样式，这是为了解决跨浏览器的问题，或者只是让其中一些看起来更好，这是这些选择器的完美用途，特别是如果你有一个大型应用程序。我不认为这个问题的答案对未来的读者会有什么帮助，因为答案很简单。我知道选择器，但这也是一个问题。当我想在一个CSS文件中设置a链接的样式时，我不希望它在其他CSS文件中更改每个a链接。我认为这就是拥有独立样式表的全部意义所在。我相信我不是唯一一个刚接触Bootstrap的人也有同样的问题。当你知道的时候，一切都很简单。确切地说，你想设计一个特定元素的样式，不使用它的名称，而是给它分配一个类。CSS中的单独文件没有任何意义，它们充当一个单独的文件，这就是为什么顺序在CSS中非常重要的原因

NAVIGATION.CSS

@font-face {
  font-family: "Mulish-Regular";
  src: url("../assets/fonts/static/Mulish-Regular.ttf");
}

.flex-column.nav,
a {
  font-family: "Mulish-Regular";
  color: rgba(255, 255, 255, 0.8) !important;
  background-color: #2d3155;
}

div.col-2 {
  padding-left: 0 !important;
  margin: 0;
}

img {
  background-color: white;
  width: 100%;
  padding: 0.5em;
}

a > span {
  padding: 0.5em;
}

a.nav-link {
  border-bottom: 1px solid rgba(255, 255, 255, 0.5);
  text-decoration: none !important;
}

span.contactText {
  font-weight: 600;
  margin-right: 0.3em;
}

section {
  padding-left: 1em;
  margin-top: 1.5em;
}

section > p {
  font-size: 14px;
}

a.nav-link:hover {
  background-color: #282a41;
}