How do we extend material-ui's CssBaseline?

Question

I'm thinking to do it like the following, but I'm not sure if this is the recommended way to do it:

import * as React from "react"
import { withStyles, createStyles, Theme } from "@material-ui/core"
import CssBaseline from "@material-ui/core/CssBaseline"

// global styles for a Mapper app
class MyCssBaseline extends React.Component {
  render() {
    return <CssBaseline />
  }
}

export default withStyles(styles)(MapperCssBaseline)

function styles(_theme: Theme) {
  return createStyles({
    "@global": {
      fontSize: 12,
      // ... custom styles here ...
    }
  })
}

Is this how? Or is there a more recommended way?

Related question/answer: https://stackoverflow.com/questions/56448538/using-createmuitheme-to-override-default-styles-on-divs-ps-body/56450285#56450285 — Ryan Cogswell, Jun 14 '19 at 19:36
@RyanCogswell Thanks. That's effectively similar to what I'm doing. — trusktr, Jun 14 '19 at 21:46

score 0 · Answer 1 · answered May 14 '20 at 14:25

I managed to do it with overrides when creating theme

export const theme: Theme = createMuiTheme({
  overrides: {
    MuiCssBaseline: {
      '@global': {
        svg: {
          maxWidth: '100%',
          maxHeight: '100%',
        },
      },
    },
  },
})

How do we extend material-ui's CssBaseline?

1 Answers1