For creating global styles with reset using styled-components

App.js

import React from 'react';

// import the global styles
import { GlobalStyles } from 'utilities/styles/global.styles';

function App() {
  return (
    <>
      <GlobalStyles />
      Hello carrots
    </>
  );
}

export default App;

global.styles.jsx

import { createGlobalStyle } from 'styled-components';

export const GlobalStyles = createGlobalStyle`
  *,
  *::before,
  *::after {
    margin: 0;
    padding: 0;
    box-sizing: inherit;
  }

  html {
    font-size: 62.5%; /* equivalent to 10px; 1rem = 10px; 10px/16px */
  }

  body {
    box-sizing: border-box;
    font-family: 'Muli', sans-serif;
  }
`;