Injecting Styles From Third-Party Components Into Shadow DOM

[thuoe]

Currently my React component uses third party components (Material UI mostly) which have their own styling.

For example:

import React from 'react';
import PropTypes from 'prop-types';
import Button from '@material-ui/core/Button';
....

When it is wrapped as a Web Component, the styling is injected to the local DOM (multiple style tags) , rather than to the Shadow DOM of the new custom element. Any ideas on how to solve this?