How to use and override themes with hooks

Hey!

I’m struggling in properly using and overriding themes. I want to use the default theme with some custom overrides (e.g. different font size).

Example: https://codesandbox.io/s/j7owzjlnqv

    "react": "16.8.0-alpha.1",
    "react-dom": "16.8.0-alpha.1",
    "react-scripts": "2.1.3",
    "@material-ui/core": "3.9.0",
    "@material-ui/styles": "^3.0.0-alpha.8"

With typescript, I cannot seem to use createMuiTheme from @material-ui/core/styles as importing it gives a conflict between jss@9 and jss@10 (latter is used by @material-ui/styles)

Thanks!

[eps1lon]

This is a common confusion. ThemeProvider is a generic theme provider. It does not automatically include the material-ui theme. You have to explicitly use it:

import { Typography } from "@material-ui/core";
import { createMuiTheme } from "@material-ui/core/styles";
import { ThemeProvider } from "@material-ui/styles";

function App() {
  const theme = createMuiTheme({
    typography: { body1: { fontSize: "2rem" } }
  });
  return (
    <ThemeProvider theme={theme}>
      <Typography variant="body1">Hey</Typography>
    </ThemeProvider>
  );
}

[eps1lon]

~@skoging Seems like you posted in the wrong issue. This is basically what I outlined in https://github.com/mui-org/material-ui/issues/14297#issuecomment-458508064~

The issue with typescript and conflicting jss types is continued in #14297. Usage issue seems resolved with https://github.com/mui-org/material-ui/issues/14217#issuecomment-455174494