material-ui - 如何从组件中访问主题调色板？

Question

我正在尝试构建一个呈现 div 的组件显示错误。

function ErrorDiv(props) {
  return (
    <Card>
      <Typography>{props.message}</Typography>
    </Card>
  );
}

我想为 <Card> 设置样式使得背景颜色为 palette.error.main , 和 <Typography>使字体颜色为白色。

但是，我不确定如何访问主题颜色。有没有palette暴露的变量？或者我应该在我的主题创建模块中将单个颜色导出为字符串，然后导入颜色以供在这里使用？

Answer 1

以下是有关此文档的链接

CSS in JS

Accessing the Theme in a Component

这是使用 withStyles 的示例:

import { withStyles } from '@material-ui/core/styles'

const styles = theme => ({
  card: {
    background: theme.palette.error.main,
    color: '#fff'
  }
})

function ErrorCard({ classes }) {
  return (
    <div>
      <Card className={classes.card}>
        <Typography variant="title" color="inherit">
          Something went wrong!!
        </Typography>
      </Card>
    </div>
  )
}
export default withStyles(styles)(ErrorCard)

Live example on Code Sandbox