最新版v4已經(jīng)對injectGlobal()廢棄,原有的injectGlobal()方法改成了createGlobalStyle()方法,使用上也發(fā)生了變化。
要定義一個全局樣式變量,需要將這個變量以組件的方式插入文檔中。
使用新版 createGlobal() 方法
- 在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;
}
`
- 修改項目入口文件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;
這樣就大功告成了。