Question

我想在组件中使用我的material-ui主题中的颜色：

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

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

我找到了一个解决此案例的工作解决方案，使用上下文来检索当前主题：

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

React上下文由material-ui“引用”，所以我的解决方案不是未来证明 - MUI的实现可能会发生变化 - 有什么方法可以解决这是以适当（或推荐）的方式？

Answer 1

您可以{@ 3}}主题变量使用react 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用于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} />
}

Answer 2

是的，你有！使用muiThemeable ..

BluetoothAdapter.getDefaultAdapter().isMultipleAdvertisementSupported();

from material-ui docs

Answer 3

如果颜色在运行时没有更改，则可以将这些常量存储在一个全局对象中，该对象用于初始化主题以及在自定义组件中使用。这样您就可以在保持代码干燥的同时不依赖于上下文。

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

3 个答案: