最新版v4已经对injectGlobal()废弃,原有的injectGlobal()方法改成了createGlobalStyle()方法,使用上也发生了变化。
要定义一个全局样式变量,需要将这个变量以组件的方式插入文档中。
使用新版 createGlobal() 方法
- 在src目录下新建common.js文件作为样式文件,对common.js做修改。
引入新的API createGlobalStyle ,在下面的创建一个 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;
这样就大功告成了。