How can I create a ThemeProvider that adds a global css file?

Question

How would you add a global css file as a custom ThemeProvider component in React? I'm building a component library for NPM. So it would enable another React application to use the css file globally.

I've tried creating one like this:

import React from 'react';
import './global.css';

interface Types {
    children: React.ReactNode
}

export default (props:Types) => <div>{props.children}</div>

Answer 1

I found a neat solution. It creates a <style /> tag with the contents of a css file:

import React from 'react';
import styles from './global.css'

interface Types {
    children: React.ReactNode
}

export default (props:Types) => (
    <>
        <style dangerouslySetInnerHTML={{__html: styles.replace(' ', '')}} />
        <div>{props.children}</div>
    </>
)