Why isn't the darkBaseTheme for material-ui applied?

Question

import React from 'react';
import ReactDOM from 'react-dom';

import darkBaseTheme from 'material-ui/styles/baseThemes/darkBaseTheme';
import MuiThemeProvider from 'material-ui/styles/MuiThemeProvider';
import getMuiTheme from 'material-ui/styles/getMuiTheme';

import {Tabs, Tab} from 'material-ui/Tabs';

const styles = {
    headline: {
    fontSize: 24,
    paddingTop: 16,
    marginBottom: 12,
    fontWeight: 400,
    },
};

const LoginTabs = () => (
    <Tabs>
    <Tab label="Login" >
        <div>
        <h2 style = {styles.headline}>Login</h2>
        <p>
            This is an example tab.
        </p>
        <p>
            You can put any sort of HTML or react component in here. It even keeps the component state!
        </p>
        </div>
    </Tab>
    <Tab label="Sign Up" >
        <div>
        <h2 style = {styles.headline}>Sign Up</h2>
        <p>
            This is another example tab.
        </p>
        </div>
    </Tab>
    </Tabs>
);

class LoginApp extends React.Component {
    constructor () {
        super();
        this.muiTheme = darkBaseTheme;
    }

    componentWillMount () {
        console.log(this.muiTheme);
    }

    render() {
        return(
            <div>
                {LoginTabs()}
            </div>
        )
    }
}

const Main = () => (
<MuiThemeProvider muiTheme={getMuiTheme(darkBaseTheme)}>
    <LoginApp />
</MuiThemeProvider>
);


// ========================================

ReactDOM.render(
    <Main />,
    document.getElementById('root')
);

The tabs are rendered with the default light theme even though I've specified that darktheme using muiThemeProvider.

Most of this code is copied from the material-ui website and I'm not sure what is wrong. Can anybody suggest a fix?

I think the palette is being overwritten at some point, but I'm not sure where.

Answer 1

You can place the MuiThemeProvider at the root - it is not required on all components.

You can make the theme dark by setting type to dark. While it's only a single property value change, internally it modifies the value of the following keys:

palette.text
palette.divider
palette.background
palette.action

The theme can be set up this way.

import CssBaseline from '@material-ui/core/CssBaseline';
import { MuiThemeProvider, createMuiTheme } from '@material-ui/core/styles';
import { Provider } from 'react-redux';

const theme = createMuiTheme({
  palette: {
    type: 'dark',
  },
});

export default function component(props) {
  return (
    <MuiThemeProvider theme={theme}>
      <div>
        <CssBaseline />
         <Header />
         <AppBody />
      </div>
    </MuiThemeProvider>
  );
}

https://material-ui.com/customization/themes/#type-light-dark-theme-