在组件的渲染函数中使用 Material-UI muiThemeable？

Question

我目前正在为我的 Web 应用程序使用 material-ui，我想为其添加主题，因此我使用它附带的 MuiThemeProvider 来为其设置主题。

该文档包含 instructions 关于如何使用带有主题的自定义组件，但遗憾的是缺少关于如何在渲染函数中使用它的说明。

例如，他们使用的代码是：

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

const DeepDownTheTree = (props) => (
  <span style={{color: props.muiTheme.palette.textColor}}>
    Hello World!
  </span>
);

export default muiThemeable()(DeepDownTheTree);

这很好，但是如果你需要渲染功能，这就不行了。我将如何实现类似的目标？（这行不通，只是一个例子）：

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

class MyComponent extends React.Component{
  render(){
    return muiThemeable()(
      <span style={{color: props.muiTheme.palette.textColor}}>
        Hello World!
      </span>
    )
  }
}

export default muiThemeable()(DeepDownTheTree);

这对我的应用程序至关重要，因为我在返回最终 DOM 之前在渲染函数中操作 DOM 的位。

Answer 1

初始无状态组件的等效有状态组件是

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

class MyComponent extends React.Component{
  render(){
    return (
      <span style={{color: this.props.muiTheme.palette.textColor}}>
        Hello World!
      </span>
    )
  }
}

export default muiThemeable()(DeepDownTheTree);

请注意，您在整个组件上使用高阶函数（即 muiThemable()），而不仅仅是从渲染函数返回的内容。

在组件的渲染函数中使用 Material-UI muiThemeable？

Using Material-UI muiThemeable within the render function of a component?

reactjs

material-ui