頁面中動態插入css

在某些應用場景中我們需要動態的插入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標籤內容