Need to use Material UI without components

Viewed 1343

I am new to Material UI. I am using react, using class as well as functional components. But when I use Material UI components, and features like makeStyles inside class component, it throws a hooks error, asking that you cannot use hooks inside class components. I know hooks is a new feature, but i am comfortable using class components, so I dont want to use hooks, but still want to use material UI. Is there a way? I am stuck.

the error comes when i use this:

const useStyles = makeStyles({
    card: {
      minWidth: 275,
    },
    bullet: {
      display: 'inline-block',
      margin: '0 2px',
      transform: 'scale(0.8)',
    },
    title: {
      fontSize: 14,
    },
    pos: {
      marginBottom: 12,
    },
  }); 

then call it inside components like so: const classes1 = useStyles();

I also have confusion regarding how to use features like collapse, which also seem to use hooks:

const [expanded, setExpanded] = React.useState(false);``

```
function handleExpandClick() {
    setExpanded(!expanded);
  }

My priority is to keep using both class and functional components, even though i dont have to use conponents of material UI, but still use material UI in normal css-form. If I have a way to use material ui in normal css-form, how will things like collapse work? Thanks in advance.

2 Answers

For a class component, you should use the Higher order component API (withStyles) instead of the Hooks API (makeStyles/useStyles).

Related