我们目前正在使用Webpack和React,使用Bootstrap进行设计,并使用自定义的CSS/SASS来覆盖一些Bootstrap样式。
在简单的HTML页面中,我们使用:
我曾尝试将app.js包装到index.js中,然后像这样设计其父元素和子元素的样式:
这不仅仅发生在 HR 上,例如我们已经完全重新设计了表单输入框,但它们仍旧以 bootstraps 默认样式出现。
在简单的HTML页面中,我们使用:
<!-- Custom styles for this template -->
<link href="./../../css/creative.css?v=1.9" rel="stylesheet">
<!-- Latest compiled and minified CSS -->
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-select/1.12.4/css/bootstrap-select.min.css">
我们对Bootstrap进行了样式覆盖,例如我们的<hr>
显示的是在我们的creative.css
文件中定义的样式。
hr {
max-width: 50px;
border-width: 3px;
border-color: #F05F40;
}
然而,当我将设计移植到使用react和webpack的项目中时,只有bootstrap覆盖了所有内容。
我尝试过:
import './css/creative.css'
import './css/bootstrap.css'
并且:
import './css/bootstrap.css'
import './css/creative.css'
我曾尝试将app.js包装到index.js中,然后像这样设计其父元素和子元素的样式:
index.jsx:
import './css/bootstrap.css'
app.jsx:
import './css/creative.css'
index.jsx:
import './css/creative.css'
app.jsx:
import './css/bootstrap.css'
这不仅仅发生在 HR 上,例如我们已经完全重新设计了表单输入框,但它们仍旧以 bootstraps 默认样式出现。
<link />
标签顺序。你确定你自己指定的样式在元素规定方面更具有优势吗?你应该考虑给你想要自定义的元素赋予类名,并在 CSS 中给出更精确的目标。例如,hr.my-own-class
,这样你的样式就能胜过 Bootstrap 的默认样式。如果你仅声明了许多hr
目标,则最新的一个会获胜。另外,这个问题完全与 React 无关。 - Jimi Pajala