Как правильно применить цветовую палитру material-ui

Question

Я использую новейшую 4 версию Mui, следую документу, создайте собственную цветовую палитру:

const theme = createMuiTheme({
  palette: {
    primary: {
      main: teal[300],
    },
    secondary: {
      main: cyan[300]
    },
  },
});

ReactDOM.render(
    <ThemeProvider theme={theme}>
      <CssBaseline />
      <AppLayout />
    </ThemeProvider>,
  document.getElementById('root')
);

затем в приложении. js У меня:

const useStyles = makeStyles((theme) => ({
root: {
  display: 'flex',
},
appBar: {
  transition: theme.transitions.create(['margin', 'width'], {
  easing: theme.transitions.easing.sharp,
...


function AppLayout() {
  const classes = useStyles();
  const theme = useTheme();

return (
  <AppBar
     position="fixed"
  />
)

Проблема в том, что я не вижу никаких изменений цвета, применяемых к моему AppBar, потратил несколько часов и ничего не понял.