Question

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

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

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

但是，我不确定如何访问主题颜色。是否存在公开的palette变量？还是应该在主题创建模块中将单个颜色导出为字符串，然后导入颜色以供此处使用？

Answer 1

这里是此文档的链接

以下是使用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

Answer 2

形成文档：Use Theme hook

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

function DeepChild() {
  const theme = useTheme();
  return <span>{`spacing ${theme.spacing}`}</span>;
}

例如，这不是您的典型用例，但是从主题访问颜色数组是必需的

如何从组件内部访问主题面板？

2 个答案: