Material-ui ：从主题中提取颜色

我想使用我的颜色material-ui像这样的组件内的主题：

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

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

我找到了一个可行的解决方案来解决这种情况，使用上下文来检索当前主题：

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

The React上下文是在“幕后”使用的material-ui，所以我的解决方案不是面向未来的——实施MUI可以改变 - 有什么方法可以以正确（或推荐）的方式解决这个问题？

You can access https://material-ui.com/styles/advanced/#accessing-the-theme-in-a-component反应主题变量hook或与higher-order成分。

带钩子的示例：

//...
import { useTheme } from '@material-ui/core/styles';

const MyComponent = () => {
    const theme = useTheme();
    return <UsersIcon color={theme.palette.primary.main} />
}

HOC 示例：

//...
import { withTheme } from '@material-ui/core/styles';

const MyComponent = ({theme, ...other}) => {
    return <UsersIcon color={theme.palette.primary.main} />
}

export default withTheme(MyComponent)

不要忘记将根应用程序组件包装为ThemeProvider

另一种值得一提的方法是makeStyles for CSS-in-JS造型：

//...
import { makeStyles } from '@material-ui/core/styles'
const useStyles = makeStyles(theme => ({
  icon: {
    color: theme.palette.primary.main
  }
}))

const MyComponent = () => {
  const classes = useStyles()
  return <UsersIcon className={classes.icon} />
}