justask.dev

Community powered answers to your dev questions

CSS reset in Gatsby with Emotion

posted: 2019 December 9th

category: css-in-js

Edit this post on GitHub.

Back

Super simple and really handy. Reset those pesky margins and borders with Emotions Global component.

1import React from "react";
2import { Global, css } from "@emotion/core";
3
4const CSSReset = ({ children }) => (
5 <>
6 <Global
7 styles={css`
8 * {
9 margin: 0;
10 padding: 0;
11 box-sizing: border-box;
12 }
13
14 body {
15 scroll-behavior: smooth;
16 overflow-y: scroll;
17 -webkit-overflow-scrolling: touch;
18 }
19 `}
20 />
21 {children}
22 </>
23);
24
25export default CSSReset;

Author: Rich Haines