How to Overwrite CSS of an external [third-party] component using Material-UI-React?

Question

I'm trying to overwrite the default CSS of an external component which isn't developed in Material-UI or my project. In styled-components, I can just take the root classes and replace them with my custom CSS. How do I do the same with Material-UI-React?

.ace-tm .ace_variable {
color : red
}

Suppose I've to replace those two classes with the new color property, how do I do it in Material styles?

This is what I've tried with no luck!

const Styles = {
  " & ace-tm": {
    "& ace_variable": {
      color: red,
      fontSize: "16px"
    },
  }
};

I'm using withStyles to later inject them in the components.

Answer 1

I just found this and thought I'd share the solution for posterity:

const GlobalCss = withStyles((theme) => ({
  '@global': {
    '.ace-tm .ace_variable': {
      color: 'red',
    },
  },
}))(() => null)

const SomeComponent = () => {
  return (
    <>
      <GlobalCss />
      <h1>Hey Jude</h1>
      <SomeComponentWhoseCSSWillBeModified />
    </>
}

Read more on this here: https://material-ui.com/styles/advanced/#global-css