css - 仅在一个反应组件中覆盖引导 css
问题描述
所以我在我的 react (CRA) 项目中使用了我在 codepen 上找到的华丽的搜索栏组件。我已经在默认的 src/index.js 中导入了 css 然后我有我的搜索组件,它由 Search.js 和 Search.module.css 组成。
显然 Bootstrap 样式和 Search 组件样式不能一起工作,当我在 src/index.js 中注释引导文件导入时,Search 组件将正常工作。
那么如何仅在我的搜索组件上覆盖引导程序?这是 Search.module.css 的 css
@import url("https://fonts.googleapis.com/css?family=Roboto:400,400i,700");
* {
font-family: Roboto, sans-serif;
padding: 0;
margin: 0;
}
.flexbox {
background: linear-gradient(155deg, #cccccc, #e8ecee, #d4d4d4);
width: 100%;
height: 100%;
display: flex;
justify-content: center;
align-items: center;
}
.search {
margin: 20px;
}
.search>h3 {
font-weight: normal;
}
.search>h1,
.search>h3 {
color: white;
margin-bottom: 15px;
text-shadow: 0 1px #eaeff1;
}
.search>div {
display: inline-block;
position: relative;
}
.search>div:after {
content: "";
background: white;
width: 4px;
height: 20px;
position: absolute;
top: 40px;
right: 2px;
transform: rotate(135deg);
box-shadow: 1px 0 #eaeff1;
}
.search>div>input {
color: white;
font-size: 16px;
background: transparent;
width: 25px;
height: 25px;
padding: 10px;
border: solid 3px white;
outline: none;
border-radius: 35px;
box-shadow: 0 1px #eaeff1;
transition: width 0.5s;
}
.search>div>input::placeholder {
color: #5a5a5a;
opacity: 1;
}
.search>div>input::-ms-placeholder {
color: #efefef;
}
.search>div>input::-ms-input-placeholder {
color: #5a5a5a;
}
.search>div>input:focus,
.search>div>input:valid {
width: 250px;
}
解决方案
由于您尚未共享代码片段。我假设引导搜索将使用:text
和button
标记。现在,它的 CSS 将来自 bootstrap。
您可以执行以下操作:
1) 创建一个搜索组件级别的类,例如“search-module” 2) 现在,在搜索组件中创建 css 或 scss 文件导入,并在该 css 中通过以下方式覆盖引导 css:
.search-module input[type=search] {...}
或者
3)您也可以在您的主 style.css 文件上执行此操作。
对于带有搜索组件的引导程序中的所有其他冲突类、标签和 ID,您需要执行第 2 步。
PS:这会使你的 CSS 膨胀。最好的办法是你可以选择 Bootstrap 中需要的那部分,然后你就可以编写自己的风格了。
谢谢你。
推荐阅读
- python - python类属性的单元测试
- python - 在带有 Connexion 的 Python Flask 应用程序中使用哪个记录器
- python - 我如何在基于 django 类的 api 视图中调用自己的方法
- spring-boot - DefaultMessageListenerContainer 中未恢复消息
- javascript - Chart.js 不同的 y 轴取决于选择选项中的图形
- visual-studio-code - 如何在 vscode 中正确使用 go 模块?
- html - 如何垂直对齐位于同一行的此输入和按钮?
- objective-c - NSDateFormatter 在 2020 年 1 月 13 日 05:22:03 -0800 的日期返回 nil
- javascript - 将 JavaScript 注入浏览器对话框
- c# - 回历日期到公历日期是否有任何正确的转换器