Question

我目前正在使用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

初始无状态组件的等效statefull组件将是

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？

1 个答案: