Пользовательский интерфейс материала: как использовать значения темы с withStyles?

Question

Я создаю компонент с 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,
  },
}));

Это нормально работает.

Но как мне использовать те же значения со стилизованными компонентами UI материала? например:

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

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

Я попытался воспроизвести приведенное выше, например:

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

, но это не сработало.

Кто-нибудь знает, как это сделать ?

Answer 1

Я попытался создать компонент со стилями, как показано ниже, и он отлично работает.

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

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