How to style all elements using styled-components?

Question

I want to do this:

* {
-webkit-box-sizing: border-box;
   -moz-box-sizing: border-box;
        box-sizing: border-box;
}

How should I do it with styled-components and react? There's the new createGlobalStyle API but I'm not sure how it can handle an asterisk?

Answer 1

Create new following component using createGlobalStyle.

import { createGlobalStyle } from 'styled-components';


const GlobalStyle = createGlobalStyle`

* {
-webkit-box-sizing: border-box;
   -moz-box-sizing: border-box;
        box-sizing: border-box;
}

`;

export default GlobalStyle;

And then import & render above component in your App component.