What is proper way to add global css style in react component if I am using styled Component?

Question

Right now, I figure out that I have two way to do this: One , I am putting global style such as in the App.css and then import them in the App.js

:root {
    box-sizing: border-box;

    font-size: 62.5%;
}

*,
::before,
::after {
    box-sizing: inherit;
    margin: 0;
    padding: 0;
}

Another way is to use GlobalStyles that provide by styled Component. Which way should I do ?

Thanks for the help!

Dennis Vash · Accepted Answer · 2021-01-17 17:41:42Z

1

If you using a library you should stick to its API.

A helper function to generate a special StyledComponent that handles global styles.

In more advanced use cases (like having a theme) your only option to alter the global styles will be using the pre defined API.

As a side note, you can do it in more than two ways (BUT DONT DO IT), like querying the DOM and editing the style.

answered Jan 17, 2021 at 17:35

Dennis Vash

54.2k12 gold badges120 silver badges133 bronze badges

Sign up to request clarification or add additional context in comments.

1 Answer 1