简书app编写笔记

reat-app index.js入口文件引入的css全局的组件都能使用到，也会影响不同组件相同class的样式，因此在项目中不建议在入口文件index.js引入css，一般建议使用第三方模块styled-components,这样在App.js文件中引入injectGlobal 方法替换成了 createGlobalStyle 没有任何的报错初始化样式不生效

app.js文件

import React, { Component } from "react";
import { GlobalStyle } from "./style";
class App extends Component {
  render() {
    return (
      <div>
        <GlobalStyle />
        <div className="dell">你好</div>
      </div>
    );
  }
}

export default App;

 

tyle.js文件

import { createGlobalStyle } from "styled-components";
export const GlobalStyle = createGlobalStyle`
    body, h1, h2, h3, h4, h5, h6, hr, p, blockquote, dl, dt, dd, ul, ol, li, pre, form, fieldset, legend, button, input, textarea, th, td { margin:0; padding:0; }    
    body, button, input, select, textarea { font:12px/1.5tahoma, arial, \5b8b\4f53; }    
    h1, h2, h3, h4, h5, h6{ font-size:100%; }    
    address, cite, dfn, em, var { font-style:normal; }    
    code, kbd, pre, samp { font-family:couriernew, courier, monospace; }    
    small{ font-size:12px; }    
    ul, ol { list-style:none; }    
    a { text-decoration:none; }    
    a:hover { text-decoration:underline; }    
    sup { vertical-align:text-top; }    
    sub{ vertical-align:text-bottom; }    
    legend { color:#000; }    
    fieldset, img { border:0; }    
    button, input, select, textarea { font-size:100%; }  
`;