如何使用 MUI 主题设置非 MUI 组件的样式？

Question

For example if I dynamically needed to apply MUI theme to my non-MUI components, like an <h1> . If I want <h1> tags to always be the same color (from the theme color) and always use the same margin, how can I globally define that in the theme and not just generating it per-component. <h1> is just an example, but my concern extends to any third party component I may use in my app.

Answer 1

Asumming you have a ParentComponent and you wish to apply the styles to its children components:

const useStyles = makeStyles({
  '@global': {
    '.children-css-selector': {
      height: 100,
      width: 100,
      backgroundColor: 'blue'
    }
  }
});

export default function ParentComponent() {
  useStyles();

  return (
       your code....
  )
}