Question

我正在使用Material UI构建组件。我正在使用默认主题文件（如此处https://material-ui.com/customization/default-theme/所述。）

我知道我可以使用<Typography variant="h5" className={classes.address}> <a href={`https://www.google.com/maps/dir/"${location}"`}>{location}</a> </Typography>从主题中引入某些值，例如：

makeStyles

那很好。

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

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

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

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

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

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

但这不起作用。

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

Answer 1

我尝试如下创建具有Styles的Component，它运行良好。

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

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

材质用户界面：如何将主题值与withStyles一起使用？

1 个答案: