Material UI：如何将 Theme 值与 withStyles 一起使用？答案

【问题标题】：Material UI: how do I use Theme values with withStyles?Material UI：如何将 Theme 值与 withStyles 一起使用？
【发布时间】：2020-08-22 05:06:18
【问题描述】：

我正在使用 Material UI 构建一个组件。我正在使用默认的主题文件（这里是https://material-ui.com/customization/default-theme/）。

我知道我可以使用 makeStyles 从主题中引入某些值：

import { makeStyles, Theme } from '@material-ui/styles';

const useStyles = makeStyles((theme: Theme) => ({
  something: {
    color: theme.palette.common.black,
  },
}));

效果很好。

但是如何将这些相同的值用于样式化的 Material UI 组件？例如：

import withStyles from '@material-ui/core/styles';

const StyledBadge = withStyles({
  badge: {
    color: theme.palette.common.black,
  },
})(Badge);

我尝试复制上述内容，例如：

const StyledBadge = withStyles((theme: Theme) => ({

但这不起作用。

有人知道这样做的正确方法吗？

【问题讨论】：

你只是得到一个 Typescript 错误吗？
@RyanCogswell 是的 - 它不喜欢 ; 并期望 ,。如果我交换它们，它会说相反。

标签： reactjs material-ui

【解决方案1】：

我尝试如下创建带有样式的组件，它运行良好。

import { withStyles } from "@material-ui/core";

export const ExpansionPanelDetails = withStyles(theme => ({
    root: {
        padding: theme.spacing(1),
    },
}))(MuiExpansionPanelDetails);

【讨论】：