material-ui:从主题中提取颜色 [英] material-ui : Extract color from theme

问题描述

我想在这样的组件内使用material-ui主题中的颜色:

I want to use a color from my material-ui theme inside a component like that :

const MyComponent = props => (
   <UsersIcon color={currentTheme.primary1Color} />
)

所以，我需要从当前提供的主题中提取一个值.

So, my need is to extract a value from the current provided theme.

我找到了一个解决此问题的可行解决方案，使用上下文检索当前主题:

I found a working solution to solve this case, using context to retrieve the current theme :

const MyComponent = (props, {muiTheme}) => (
    <UsersIcon color={muiTheme.palette.primary1Color} />
)
contextTypes = {
    muiTheme: PropTypes.object.isRequired,
}

React上下文是由material-ui在幕后"使用的，因此我的解决方案不是未来的证明– MUI的实现可以更改–是否有任何方法可以适当地解决此问题(或推荐)方式?

The React context is used "under the hood" by material-ui, so my solution is not future proof – the implementation of MUI can change –, is there any way to solve this in a proper (or recommended) way ?

推荐答案

是的！使用muiThemeable ..

Yes you have! using muiThemeable..

import muiThemeable from 'material-ui/styles/muiThemeable';
const MyComponent = props => (
   <UsersIcon color={props.muiTheme.palette.primary1Color} />
)
export default muiThemeable()(MyComponent )

来自Material-ui文档

这篇关于material-ui:从主题中提取颜色的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！