Material-ui : darkTheme 不影响 wrapped children

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的child的AppBar确实是暗的，然而，MyCustomComponent及其children（即使他们是基础 Material-ui 组件，例如 RaisedButton）未使用深色主题。

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

Answer 1

您需要指定您的自定义组件为"themeable"。为此，您可以将组件包装在 '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

Answer 2

您需要将所有内容 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

Material-ui : darkTheme 不影响 wrapped children

Material-ui : darkTheme does not affect wrapped children

components

themes

reactjs

material-ui