javascript - 为什么不应用 material-ui 的 darkBaseTheme？

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')
);

即使我使用 muiThemeProvider 指定了深色主题，选项卡仍使用默认浅色主题呈现。

大部分代码是从 material-ui 网站上复制的，我不确定哪里出了问题。有人可以建议修复吗？

我认为调色板在某个时候被覆盖了，但我不确定在哪里。

Answer 1

您可以将 MuiThemeProvider 放在根目录下——并非所有组件都需要它。

您可以通过将类型设置为深色来使主题变暗。虽然它只是单个属性值更改，但它在内部修改了以下键的值:

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

主题可以这样设置。

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-