How do I add base styling for entire app with "Styled-components"?

Question

So let's say I have some base styling for the app like:

:root {
  --color-primary: #eb2f64;
  --color-primary-light: #FF3366;
  --color-primary-dark: #BA265D;
}
* {
  margin: 0;
  padding: 0;
}

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

html {
  box-sizing: border-box;
  font-size: 16px;
}

body {
  font-family: 'Open Sans', sans-serif;
  font-weight: 400;
  line-height: 1.6;
  background-image: linear-gradient(to right bottom, var(--color-primary-light), var(--color-primary-dark));
  background-size: cover;
}

I want to use "Styled-components" library but wondering how do I add these base styles to my app without touching any external .scss file? Or should I create base.scss file and do import './base.scss'; to index.js?

It doesn't allow me to do smth like this:

const Wrapper = styled.html`
  box-sizing: border-box;
  font-size: 16px;
`;

I get an error because of that html element

Answer 1

Aha. Found it: import { injectGlobal } from 'styled-components';