Material-ui : darkTheme 不影响被包裹的孩子

Question

我的问题很简单，我想在我的应用程序的一部分中使用 Material-ui 默认的 darkTheme。这是一个代码示例：

<div>
  <MuiThemeProvider muiTheme={getMuiTheme(darkBaseTheme)}>
    <div>
      <AppBar title="I am dark" />
      <MyCustomComponent label="I should be dark but I am not" />
    </div>
  </MuiThemeProvider>
  <MuiThemeProvider muiTheme={getMuiTheme(lightBaseTheme)}>
      <p>I am in the lightBaseTheme (default theme)</p>
  </MuiThemeProvider>
</div>

应用的第一部分必须是深色主题（即左侧菜单），第二部分必须是浅色主题（即应用本身）。

作为MuiThemeProvider 的直接子代的AppBar 确实是深色的，但是，MyCustomComponent 及其子代（即使它们是基础 Material-ui 组件，例如 RaisedButton）并没有使用深色主题。

让MyCustomComponents 及其所有子子项也使用深色主题的最简单方法是什么？

Answer 1

您需要将MuiThemeProvider 中的所有内容包装到一个元素中。

<MuiThemeProvider muiTheme={getMuiTheme(darkBaseTheme)}>
  <div>
    <AppBar title="I am dark" />
    <MyCustomComponent label="I should be dark but I am not" />
  </div>
</MuiThemeProvider>

实际上你必须有一个像

这样的错误

MuiThemeProvider.render(): A valid React element (or null) must be returned. You may have returned undefined, an array or some other invalid object.

当然只有MyCustomComponent 中的Material-UI 组件会有主题外观。您需要手动制作的所有其他内容：以 Jeff McCloud 展示的方式或使用如下上下文：

function MyCustomComponent (props, context) {
    const { palette } = context.muiTheme;
    // Now you have access to theme settings. for example: palette.canvasColor
}

MyCustomComponent.contextTypes = {
    muiTheme: React.PropTypes.object.isRequired,
};

另一种风格化纯 HTML 或 React 组件的方法是将它们包装到 react-theme-provider。像这样：

import ThemeProvider from 'react-theme-provider';

<MuiThemeProvider muiTheme={getMuiTheme(darkBaseTheme)}>
  <div>
    <AppBar title="I am dark" />
    <ThemeProvider>
      <MyCustomComponent label="I should be dark and I am!" />
    </ThemeProvider>
  </div>
</MuiThemeProvider>

参考：https://github.com/callemall/material-ui/blob/master/src/styles/MuiThemeProvider.js#L7

Answer 2

您需要指定您的自定义组件是“可主题化的”。为此，您可以将组件包装在“muiThemeable”高阶组件中：

import React from 'react';
import muiThemeable from 'material-ui/styles/muiThemeable';

class MyCustomComponent extends React.Component {
// ... your component will now have access to "this.props.muiTheme"
}


export default muiThemeable()(MyCustomComponent);

参考：http://www.material-ui.com/#/customization/themes