I'm trying to use custom theming in Material UI like so:

```
const theme = createMuiTheme({
    palette: {
        primary: {
            main: PRIMARY_COLOR, // "#121212"
        },
        secondary: {
            main: SECONDARY_COLOR, // "#F7D600"
        },
    },
});

const Wrapper = ({ children }) => {
    return (
      <ThemeProvider theme={theme}>{children}</ThemeProvider>
    );
};

```

This works for things like buttons:

```
<Button         
   variant="contained"
   color="secondary"
/>

```

In this case, the hex color `#F7D600` gets applied.

But when I try to use the same color on my components using `makeStyles`, it doesn't seem to recognize it. It just uses the default by Material UI:

```
const useStyles = makeStyles((theme) => ({
  someElement: {
    backgroundColor: theme.palette.primary.main // <- not working. it uses the default purple color
  }
});

```

I also tried `useTheme` but it's the same result:

```
const SomeComponent = () => {
  const theme = useTheme();
  return (
    <Box style={{ backgroundColor: theme.palette.primary.main }}></Box>
  );  
}

```

Any ideas what I could be missing?