Using React in Web Components + CSS - reactjs

Question

I am trying to implement web components using React. The reason I do this, is because we are a big newspaper company and our 3rd party CMS only allows for extendability using web components. So I read about a way to make a react component a web component on the official docs, like so:
const proto = Object.create(HTMLElement.prototype, {
attachedCallback: {
value: function() {
const mountPoint = document.createElement('span');
this.createShadowRoot().appendChild(mountPoint);
const name = this.getAttribute('name');
const url = 'https://www.google.com/search?q=' + encodeURIComponent(name);
ReactDOM.render(<a href={url}>{name}</a>, mountPoint);
}
}
});
document.registerElement('x-search', {prototype: proto});
This actually does work. I created a react app using create-react-app and rewrote the index.js like so:
import React from 'react';
import ReactDOM from 'react-dom';
import './index.css';
import App from './App';
import registerServiceWorker from './registerServiceWorker';
// ReactDOM.render(<App />, document.getElementById('root'));
const proto = Object.create(HTMLElement.prototype, {
attachedCallback: {
value: function() {
const mountPoint = document.createElement('span');
this.createShadowRoot().appendChild(mountPoint);
ReactDOM.render(<App />, mountPoint);
}
}
});
document.registerElement('x-my-app', {prototype: proto});
registerServiceWorker();
And yes—this does actually work! However, what this does, is put my CSS in a separate file and as my web component has shadow DOM it is not styled at all. It needs to live inside the generated web component, but how do I do that?