时间戳

首页 > 解决方案 > 如何防止一个 CSS 文件覆盖 React-Bootstrap 中的另一个 CSS 文件

css - 如何防止一个 CSS 文件覆盖 React-Bootstrap 中的另一个 CSS 文件

问题描述

我正在使用 React-Bootstrap。到目前为止，我已经创建了两个不同的组件，Register 和 Navigation。每个组件都有自己的 CSS 样式表。我首先创建了 Navigation，然后是 Register。导航看起来和按预期工作。但是，当我添加 Register CSS 时，现在 Navigation 正在从 Register 中获取一些样式。我该如何防止这种情况？我认为通过为每个组件设置两个单独的样式表，我不必担心它们会相互覆盖。有什么我需要做或添加的，以便它们彼此分开吗？除了 font-face 属性外，我的 App.css 文件是空的。并且没有其他 CSS。我过去使用过 Bootstrap，但没有使用 React-Bootstrap，所以我可能遗漏了一些简单的东西。

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;
}

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;
}

标签： csstwitter-bootstrapreact-bootstrap

解决方案

推荐阅读