Using custom theme in makeStyles

Question

I have done some research and was not able to find a solution.

I am trying to create a theme using createMuiTheme and use it later in makeStyles to retrieve the keys inside. (palette in the example) However it seems that the custom theme does not get applied in makeStyles.

import React from 'react';
import ReactDOM from 'react-dom';
import { makeStyles, createMuiTheme, ThemeProvider } from '@material-ui/core/styles';
import Button from '@material-ui/core/Button';
import red from "@material-ui/core/colors/red";

const useStyles = makeStyles(theme => {
  console.log(theme); // Only defaults but not red in palette.
  return {
    root: {
      color: theme.palette.primary[400] // This is not working.
    }
  };
});

function App() {
  const classes = useStyles();
  const theme = createMuiTheme({
    palette: {
      primary: red
    }
  });
  return (
    <ThemeProvider theme={theme}>
      <Button className={classes.root}>Hook</Button>
    </ThemeProvider>
  );
}

However in another component using useTheme it works without any issue. What have I done wrong?

const useStyles = makeStyles(theme => {
  console.log(theme); // Here palette includes the new palette.
  return {
    root: {
      color: theme.palette.primary[400]
    }
  };
});

function anotherApp() {
  const classes = useStyles();
  const theme = useTheme(); 
  ...
}

Answer 1

Your custom theme is applied in this line: <ThemeProvider theme={theme}>, and your makeStyles function is called before that.
That means, in this line const classes = useStyles(); you call your makeStyles function, but your theme is still the default theme.
The solution is what you already did, create a CustomizedButton and inside it call the useStyles hook.