CODEWITHSUNDEEP
reactjsmaterial-ui
MeltingDog
MeltingDog

Reputation: 15404

Material UI: how do I use Theme values with withStyles?

I am building a component with Material UI. I am using the default theme file (as per here https://material-ui.com/customization/default-theme/).

I know I can bring in certain values from the theme with makeStyles as such:

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

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

That works fine.

But how do I use those same values with styled Material UI components? eg:

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

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

I tried replicating the above, eg:

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

but this doesn't work.

Would anyone know the correct way of doing this?

Upvotes: 0

Views: 1931

Answers (1)

Sahil Paudel
Sahil Paudel

Reputation: 474

I tried creating Component withStyles as below and it is working perfectly.

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

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

Upvotes: 4

Related Questions