Как перезаписать CSS внешнего [стороннего] компонента с помощью Material-UI-React?

Я пытаюсь перезаписать CSS по умолчанию внешнего компонента, который не разработан в Material-UI или в моем проекте. В стилизованных компонентах я могу просто взять корневые классы и заменить их своим собственным CSS. Как мне сделать то же самое с Material-UI-React?

.ace-tm .ace_variable {
color : red
}

Предположим, мне нужно заменить эти два класса новым свойством цвета, как мне это сделать в стилях материала?

Это то, что я безуспешно пробовал!


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

Я использую withStyles, чтобы позже внедрить их в компоненты.


reactjs material-ui css jss styles
person BugggyBug    schedule 20.08.2019    source источник

Ответы (1)


arrow_upward
3
arrow_downward

Я только что нашел это и подумал, что поделюсь решением для потомков:

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

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

Подробнее об этом читайте здесь: https://material-ui.com/styles/advanced/#global-css

person Aldo Sanchez    schedule 31.07.2020