Wie füge ich das Basistyling für die gesamte App mit "Styled-Komponenten" hinzu?

Question

Also lassen Sie uns sagen, ich habe eine gewisse Grund Styling für die App wie:

: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; 
} 

ich verwenden möchte „Styled-Komponenten“ Bibliothek aber fragen, wie kann ich diese Basis Stile meiner App hinzufügen, ohne eine externe .scss Datei zu berühren ? Oder soll ich base.scss Datei erstellen und import './base.scss'; zu index.js machen?

Es ist mir nicht erlaubt smth wie dies zu tun:

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

ich einen Fehler, weil dieses html Element

Answer 1

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