1. react 简书 项目初始化

1. 创建 react 项目

　　npx create-react-app my-app

2. src 目录下删除 除了 index.js index.css app.js 的文件

3. 引入 styled-components 样式组件

　　yarn add styled-components

4. 修改 index.css 改名为 style.js 并书写 style.js 写入 reset.css

　　#style.js

import { createGlobalStyle } from 'styled-components';

 

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;

}

/* HTML5 display-role reset for older browsers */

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;

}

`

5. 修改 index.js 使 style.js 默认样式 作用于全局

import React, {Fragment} from 'react';

import ReactDOM from 'react-dom';

import { Globalstyle } from './style.js';

import App from './App';

 

const NewApp = (<Fragment>

    <Globalstyle />

    <App />

</Fragment>);

 

ReactDOM.render(NewApp, document.getElementById('root'));