組件的渲染函數中使用材料的UI muiThemeable？

即時通訊目前使用材料的UI我的web應用程序，並想使用它自帶的主題，以它MuiThemeProvider到主題添加到它因此Im。組件的渲染函數中使用材料的UI muiThemeable？

的文檔中包含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位。

來源

2017-04-09 James Heald

難道你不只是使用'this.props.muiTheme.palette.textColor'呢？ –

我也可能錯了，而是奔同時，將工作我想你應該採取muiThemeable'的'優勢，所以當你切換主題可以切換實時顏色。 –

等效全狀態的組件添加到您最初的無狀態組件將是您使用更高階的功能（這是muiThemable（））整個組件上，而不是正是從返回

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);

注渲染功能。

來源

2017-04-09 15:47:19

組件的渲染函數中使用材料的UI muiThemeable？

回答

相關問題