How Do you reset the CSS in React if you're doing styled components?

Question

So I'm creating a footer with styled components and we don't use classes like in normal css.

If I want to replicate the same CSS trick where we do this code below

  * {
    box-sizing: border-box;
    margin: 0;
    padding: 0;
   }

How would I replicate this in a styled component? Is that even the correct way to do it?

Or would I need to create an App.css file and simply add it to my project?

Here's the typical code for a styled component in react

 import styled from 'styled-components/macro';

 export const Container = styled.div`
 padding: 80px 60px;
 background: black;
 font-family: 'Nunito Sans', sans-serif;

@media (max-width: 1000px) {
  padding: 70px 30px;
}
`;

Is it possible to add that * { box-sizing} code into my styled component or what is the proper way to implement that into my project?

Answer 1

import { createGlobalStyle } from 'styled-components'

const GlobalStyle = createGlobalStyle`
  * {
    box-sizing: border-box;
    margin: 0;
    padding: 0;
  }
`

// in your app root
<React.Fragment>
  <GlobalStyle />
  <Navigation /> {/* example of other top-level stuff */}
</React.Fragment>