我現在用了兩個css的套件
一個A套件:onsenUI
功能比較多類型的那種Framework
不是只有按鈕、表單、列表這些組件的那種框架
一個B套件:cirrus
只是一個純css的Framework
但是裡面有一個CARD的元件事我會需要用到的
因為A套件沒有我想要的那種CARD的元件
我的HTML結構長大概這樣
<ons-navigator id="myNavigator" page="tab1.html">
<ons-page id="tab1">
<!--one-xxx 開頭的是 onsen ui 自定義的html元件 -->
<div class="row">
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore.</p>
<figure class="fig">
<img src="http://i.imgur.com/KjyvQ6I.jpg" alt="Yosemite National Park" class="img-stretch">
<figcaption class="fig-caption text-center">Yosemite National Park</figcaption>
</figure>
</div>
<!-- 上面這個div是cirrus的元件 -->
</ons-page>
</ons-navigator>
ons-page的樣式會把裡面那個row的樣式蓋掉
就是說onsenui把cirrus的樣式蓋掉
但是是只有在ons-page這個元件包覆的時候才會發生
我會需要ons-page提供給我的另外一個功能(不是外觀性質的的功能)
有辦法讓cirrus的css引入時強行優先覆蓋在onsenui的css上面嗎?
反正只是外觀強行蓋掉
我有試過把onenui的css先引入再引入cirrus的css但這樣好像沒用
暴力方法~
透過chrome偵錯工具找到class名稱
再把整串丟進自己的CSS檔修改=>加上!important
不知道這樣有沒有辦法解決你的情況
el-classABC:not(:root) {
color:red !important;
}
不過這樣不太好就是,因為變成曾經面試的某個主管給我的建議
引入這麼大的一個套件,卻只是需要他的2,3個功能,很浪費資源
而我近期再寫vue cli
component裡有些樣式改不了就必須將CSS搬到根組件(APP.vue)