在某些應用場景中我們需要動態的插入css樣式字符串,比如在項目中使用了第三方的UI組件庫,有時候需要動態配置來改變該組件的部分樣式,同一組件可能有多種不同樣式的時候,這時候動態插入css樣式就派上用場了。
這裏也是推薦一個插件,appendStyleCss
使用方式也很簡單
首先安裝依賴
npm install append-style-css -S
在頁面中引入
import appendStyle from 'append-style-css'
最後就是使用該方法,插入css字符
appendStyle(`
body {
background: #fa5;
}
`)
該插件的語法比較jiand
appendStyleCss(css, opts);
其中,css是代碼字符,opts還支持可選項配置
- opts.container 自定義style標籤插入的容器,默認爲head標籤,示例 documen.querySelector('#demo')
- opts.prepend 插入位置,默認爲false,即向末尾插入;有些時候可能希望將默認CSS放在前面,這樣就可以很容易地被用戶樣式覆蓋
- opts.id style標籤id,默認爲styleId,便於多次append時做清除使用
- opts.isClear 默認爲true,當爲true時,在重複添加時會先清空id爲上述定義的style標籤內容