我们如何扩展material-ui的CssBaseline？

Question

我正在考虑这样做，但我不确定这是否是推荐的方法：

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

这是怎么回事？还是有更推荐的方式？

Answer 1

我在创建主题时设法用overrides 做到了

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