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指定了darktheme，也会使用默认的灯光主题渲染选项卡。

大部分代码都是从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-

为什么不应用darkBaseTheme for material-ui？

1 个答案: