react 简书项目1

Posted 2020-12-17 nothingness

1、项目初始化配置

styled-components让css项目互相不干扰

cnpm i styled-components

使用方法

import { createGlobalStyle } from ‘styled-components‘;

export const Globalstyle = createGlobalStyle `样式书写`

 

引入，用组件方式使用

import {Globalstyle } from‘./style‘

ReactDOM.render(

  <React.StrictMode>

  <Globalstyle />

    <div>111</div>

  </React.StrictMode>,

  document.getElementById(‘root‘)

);

2、去除默认样式，使用reset.css，让样式在每一个浏览器上显示差异最小化

https://meyerweb.com/eric/tools/css/reset/

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;

}

`