CODEWITHSUNDEEP
reactjsmaterial-ui
user3450590
user3450590

Reputation: 341

Need to use Material UI without components

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.

Upvotes: 2

Views: 1480

Answers (2)

Ryan Cogswell
Ryan Cogswell

Reputation: 80986

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

Upvotes: 1

Tony Martinez
Tony Martinez

Reputation: 335

To avoid using useStyles, check out this link: https://material-ui.com/customization/components/

Scroll to "Use the dev tools" and it explains how to find the class names you need to override.

And to avoid using useState, just use Class component state which I'm sure you're familiar with. https://reactjs.org/docs/state-and-lifecycle.html

Upvotes: 1

Related Questions