Material-ui Next Theme Not applying

Question

I'm trying to get a simple theme override set up on my project, but it doesn't seem to be applying.

Theme: (all it should do it change primary color to red, but it doesn't)

const theme = createMuiTheme({
    palette: {
        type: 'dark',
        primary: {
            light: red[300],
            main: red[500],
            dark: red[700],
        },
    },
    appBar: {
        height: 55,
    },
});
const styles = theme => ({})

Then I wrapped my whole app in MuiThemeProvider like so

class App extends Component {

    constructor(props) {
        super(props);
    }

    render() {
        return (
            <CssBaseline />,
            <Router>
                <MuiThemeProvider muiTheme={theme}>
                    <div>
                        <MaterialUiApp />
                    </div>
                </MuiThemeProvider>
            </Router>
        );
    }
} export default withStyles(styles, { withTheme: true })(App);

Yet it doesn't seem to be applying the theme to the elements in my app. MaterialUiApp is just a wrapper for the various pieces of my main layout, such as two permanent drawers, appbar, and a content container (which currently has form elements in it).

Edit: I can tell the default theme is properly applying by switching my AppBar color from primary to secondary, but it uses the default theme's colors instead of my own.

Edit: Here's the code on CodeSandbox .

Answer 1

So apparently my issue was with muiTheme={theme} in the MuiTheme element. It should be just theme={theme} in material-ui beta. I didn't realized they changed it.