styled-components 全局樣式定義，由injectGlobal改為createGlobalStyle

The injectGlobal API was removed and replaced by createGlobalStyle in styled-components v4. 原文鏈接

具體使用

 1 import { createGlobalStyle } from 'styled-components';
 2 
 3 export const GlobalStyle = createGlobalStyle`
 4   html, body, div, span, applet, object, iframe,
 5   h1, h2, h3, h4, h5, h6, p, blockquote, pre,
 6   a, abbr, acronym, address, big, cite, code,
 7   del, dfn, em, img, ins, kbd, q, s, samp,
 8   small, strike, strong, sub, sup, tt, var,
 9   b, u, i, center,
10   dl, dt, dd, ol, ul, li,
11   fieldset, form, label, legend,
12   table, caption, tbody, tfoot, thead, tr, th, td,
13   article, aside, canvas, details, embed, 
14   figure, figcaption, footer, header, hgroup, 
15   menu, nav, output, ruby, section, summary,
16   time, mark, audio, video {
17     margin: 0;
18     padding: 0;
19     border: 0;
20     font-size: 100%;
21     font: inherit;
22     vertical-align: baseline;
23   }
24   /* HTML5 display-role reset for older browsers */
25   article, aside, details, figcaption, figure, 
26   footer, header, hgroup, menu, nav, section {
27     display: block;
28   }
29   body {
30     line-height: 1;
31   }
32   ol, ul {
33     list-style: none;
34   }
35   blockquote, q {
36     quotes: none;
37   }
38   blockquote:before, blockquote:after,
39   q:before, q:after {
40     content: '';
41     content: none;
42   }
43   table {
44     border-collapse: collapse;
45     border-spacing: 0;
46   }
47 `

View Code

在App.js中導入

 1 import { GlobalStyle } from './style.js';
 2 import React, { Fragment } from 'react';
 3 function App() {
 4   return (
 5     <Fragment>
 6       <GlobalStyle />
 7       <Header />
 8     </Fragment>
 9   );
10 }

參考鏈接：http://www.rzrgm.cn/cxx9759/p/9807866.html

posted @ 2019-05-17 15:53 xxdw8 閱讀(1051) 評論(0) 收藏舉報

刷新頁面返回頂部

xxdw8

styled-components 全局樣式定義，由injectGlobal改為createGlobalStyle

公告