使用 CreateGlobalStyle 在 React Styled-Components 取代 CSS Reset 與 CSS Normalize

使用 Styled-Components 來撰寫 Style 最大的好處之一，就是能夠透過 React Components 避免掉 CSS 全域汙染的問題。但仍然有些 Style 是希望跨 Components 於全域做設定的，像將瀏覽器統一重置的 CSS Reset 或 CSS Normalize 。CreateGlobalStyle 是 Styled-Components 所提出的解法。

第ㄧ步：使用 Create-React-App 建構 React Styled-Components 開發環境

參考文章: 使用 Create-React-App 創建 React Styled-Components 及 SASS 開發環境

第二步：建立 globalStyle.js 並從 Styled-Components 引入 createGlobalStyle

建立 globalStyle.js 在 components 資料夾

$ mkdir src/components
$ touch src/components/globalStyle.js

進入 globalStyle.js ，從 Styled-Components 引用 createGlobalStyle

import { createGlobalStyle } from "styled-components";

加入 Reset 和 CSS 全域的 Style 設定

export const ResetStyle = 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;
  box-sizing: border-box;
}
address, caption, cite, code, dfn, em, strong, th, var, b {
  font-weight: normal;
  font-style: normal;
}
abbr, acronym {
  border: 0;
}
article, aside, details, figcaption, figure, footer, header, hgroup, menu, nav, section {
  display: block;
}
*,
*::after,
*::before {
  margin: 0;
  padding: 0;
  box-sizing: inherit;
}
html {
  text-size-adjust: 100%;
  box-sizing: border-box;
}
body {
    line-height: 1;
}
ol, ul {
  list-style: none;
}
blockquote, q {
  quotes: none;
}
blockquote {
  &:before,   &:after {
    content: '';
    content: none;
  }
}
q {
  &:before,   &:after {
    content: '';
    content: none;
  }
}
table {
  border-collapse: collapse;
  border-spacing: 0;
}
caption, th {
  text-align: left;
}
textarea {
  resize: none;
}
a {
  text-decoration: none;
  cursor: pointer;
}
button {
  padding: 0;
  border: none;
  background: none;
}
`;

加入 CSS 全域設定

export const GlobalStyle = createGlobalStyle`
html {
  box-sizing: border-box;
  font-size: 62.5%; 
  font-family: 'HelveticaNeue', Helvetica, Arial, 'Lucida Grande', sans-serif;
}
`;

第三步：到 App.js 中將 ResetStyle 和 GlobalStyle加入 Template

回到 App.js 裡面引入 globalStyle.js 中的 ResetStyle 和 GlobalStyle

import React, { Component } from 'react';
import {ResetStyle, GlobalStyle} from './components/globalStyle'
class App extends Component {
  render() {
    return (
      <div className="App">
      </div>
    );
  }
}

將 ResetStyle 和 GlobalStyle 放在 Template 最上方，記得 ResetStyle 要放在 GlobalStyle 之前。加上 <ul><li></li></ul> 來測試是否有 Reset 掉 <li> 的圓點，且順利加入 Global 的字體設定。

import React, { Component } from 'react';
import {ResetStyle, GlobalStyle} from './components/globalStyle'
class App extends Component {
  render() {
    return (
      <div className="App">
        <ResetStyle />
        <GlobalStyle />
        <ol> 
          <li>Test</li>
          <li>Test</li>
          <li>Test</li>
        </ol>
      </div>
    );
  }
}

Say hello! 我是 Angel,
這裏的內容如果有幫到你，希望能獲得一些拍手作為鼓勵 
工作上的合作歡迎隨時透過 Mail 聯繫我 contact@aneglho.design
– 
Thanks for watching!