我正在使用 React-Bootstrap。到目前为止,我已经创建了两个不同的组件,Register 和 Navigation。每个组件都有自己的 CSS 样式表。我先创建导航,然后注册。导航看起来并按预期工作。但是,当我添加 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;
}