美文网首页
如何使用v4版本styled-components的全局样式?

如何使用v4版本styled-components的全局样式?

作者: SmileMylife | 来源:发表于2019-06-08 10:29 被阅读0次

    1.首先需要安装V4版本的styled-components,由于v4版本废除了injectGlobal的使用,所以创建方式应该改为如下方式:

    import { createGlobalStyle } from "styled-components";
    
    //css全局样式,reset.css
    export const GlobalStyle = createGlobalStyle`
    html, body, div, span, applet, object, iframe,
    h1, h2, h3, h4, h5, h6, p, blockquote, pre,
    a, abbr, acronym, address, big, cite, code,
    del, dfn, em, img, ins, kbd, q, s, samp,
    small, strike, strong, sub, sup, tt, var,
    b, u, i, center,
    dl, dt, dd, ol, ul, li,
    fieldset, form, label, legend,
    table, caption, tbody, tfoot, thead, tr, th, td,
    article, aside, canvas, details, embed, 
    figure, figcaption, footer, header, hgroup, 
    menu, nav, output, ruby, section, summary,
    time, mark, audio, video {
        margin: 0;
        padding: 0;
        border: 0;
        font-size: 100%;
        font: inherit;
        vertical-align: baseline;
    }
    article, aside, details, figcaption, figure, 
    footer, header, hgroup, menu, nav, section {
        display: block;
    }
    body {
        line-height: 1;
    }
    ol, ul {
        list-style: none;
    }
    blockquote, q {
        quotes: none;
    }
    blockquote:before, blockquote:after,
    q:before, q:after {
        content: '';
        content: none;
    }
    table {
        border-collapse: collapse;
        border-spacing: 0;
    }
    `;
    

    2.在app组件中按如下方式使用:

    import React from 'react';
    import Header from "./common/header";
    import { GlobalStyle } from "./style";
    
    function App() {
      return (
        <div className="App">
            <GlobalStyle/>
            <Header/>
        </div>
      );
    }
    
    export default App;
    
    

    相关文章

      网友评论

          本文标题:如何使用v4版本styled-components的全局样式?

          本文链接:https://www.haomeiwen.com/subject/bgzbxctx.html