styled-components組件升級v4版本的全局樣式

最新版v4已經(jīng)對injectGlobal()廢棄,原有的injectGlobal()方法改成了createGlobalStyle()方法,使用上也發(fā)生了變化。
要定義一個全局樣式變量,需要將這個變量以組件的方式插入文檔中。

使用新版 createGlobal() 方法

  1. 在src目錄下新建common.js文件作為樣式文件,對common.js做修改。
    引入新的API createGlobalStyle ,在下面的創(chuàng)建一個 GlobalStyle 變量,用 createGlobalStyle 方法把全局樣式包裹在其中(包裹css樣式使用反引號字符串):
import { createGlobalStyle } from 'styled-components';
export const GlobalStyle = createGlobalStyle `
    body {
        line-height: 1;
    }
`
  1. 修改項目入口文件App.js(一般默認指 src 目錄下的App.js),引入
    import { GlobalStyle } from './common.js<GlobalStyle/>
    如下
import React from 'react';
import { GlobalStyle } from './common.js'

function App() {
  return (
    <div className="App">
        <GlobalStyle/>
    </div>
  );
}

export default App;

這樣就大功告成了。

?著作權歸作者所有,轉載或內容合作請聯(lián)系作者
平臺聲明:文章內容(如有圖片或視頻亦包括在內)由作者上傳并發(fā)布,文章內容僅代表作者本人觀點,簡書系信息發(fā)布平臺,僅提供信息存儲服務。

推薦閱讀更多精彩內容