CODEWITHSUNDEEP
reactjsmaterial-designmaterial-ui
acaputo
acaputo

Reputation: 300

How to style non MUI Components with an MUI theme?

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.

Upvotes: 1

Views: 900

Answers (1)

rept
rept

Reputation: 97

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....
  )
}

Upvotes: 1

Related Questions