import React from "react"
import { CssBaseline } from "@material-ui/core"
import {
  ThemeProvider,
  createMuiTheme,
  responsiveFontSizes,
} from "@material-ui/core/styles"

const MuiThemeProvider = ({ children }) => {
  let theme = createMuiTheme({
    // 背景色を適用すると、cssが適用される前に一瞬白背景が映るので画面がちらつく
    // palette: {
    //   background: {
    //     default: "#dddddd",
    //   },
    // },
    // フォントを適用すると、最初にブラウザのデフォルトフォントで表示され、
    // 一瞬後にここで指定したフォントに切り替わるので画面がちらつく
    // typography: {
    //   fontFamily: ["Noto Serif", "Noto Sans JP"].join(","),
    // },
  })
  theme = responsiveFontSizes(theme)

  return (
    <ThemeProvider theme={theme}>
      <CssBaseline />
      {children}
    </ThemeProvider>
  )
}
export default MuiThemeProvider