zoukankan      html  css  js  c++  java
  • styled-components 全局样式定义,由injectGlobal改为createGlobalStyle

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

    官方链接 createGlobalStyle

    具体使用

     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 }

    参考链接:https://www.cnblogs.com/cxx9759/p/9807866.html

    学习记录,望指点学习,谢谢!
  • 相关阅读:
    六个月的实习
    cookbook学习第二弹
    cookbook学习第一弹
    maketrans translate
    Python strip函数用法小结
    【翻译】How To Tango With Django 1.5.4 第一章
    os相关方法总结
    python基础(一)
    bash快捷键
    Linux基本命令
  • 原文地址:https://www.cnblogs.com/herewego/p/10881734.html
Copyright © 2011-2022 走看看