Enhancing from Component in React with Material-UI

Question

I am using React and Material-UI. Is there any way to export a class estended from React.Component? I want to use some React variables like state. If this is not possible, how can I use state?

Actual code (works):

import React from 'react';
import { Typography } from '@material-ui/core';
import { makeStyles } from '@material-ui/styles';

const styles = makeStyles(() => ({
    style1: {
        fontSize: '12px'
    }
}));

const MyComponent = () => {
    const classes = styles();
    return(
        <Typography className={classes.style1}>Hello World</Typography>
    );
}

export default MyComponent;

What I am looking for:

import React, { Component } from 'react';
import { Typography } from '@material-ui/core';
import { makeStyles } from '@material-ui/styles';

export default class MyComponent extends Component {
    constructor(props){
        super(props);
        this.classes = makeStyles(() => ({
            style1: {
                fontSize: '12px'
            }
        }));
    }

    render() {
        return(
            <Typography className={this.classes.style1}>Hello World</Typography>
        );
    }
}

There is somethign wrong when refering to the classes. It compiles and shows in the browser but the components dont get the style — Imanol, Nov 18 '20 at 23:26
Maybe you need to put that info in the question. What did you try? (which you already mentioned). What happens when you run? What are the errors or warnings that you have encountered when you ran it? — SkrewEverything, Nov 18 '20 at 23:28

score 1 · Accepted Answer · answered Nov 18 '20 at 23:39

You are using makeStyles(), which is used when your component is a functional component. makeStyles() is a Hooks API.

If you are using the Class component, then you must be using the HOC variant, which is withStyles

Example taken from here:

import React from 'react';
import { withStyles } from '@material-ui/core/styles';

const styles = {
  root: {
    backgroundColor: 'red',
  },
};

function MyComponent(props) {
  return <div className={props.classes.root} />;
}

export default withStyles(styles)(MyComponent);

withStyles() can be used for both functional and class components unlike makeStyles(), which can only be used for functional components.

You can also use decorator syntax for HOC variant like here. But you need to use this babel plugin like mentioned in the official material-ui docs:

import React from 'react';
import { withStyles } from '@material-ui/core/styles';

const styles = {
  root: {
    backgroundColor: 'red',
  },
};

@withStyles(styles)
class MyComponent extends React.Component {
  render () {
    return <div className={this.props.classes.root} />;
  }
}

export default MyComponent

Thanks @SkrewEverything. This works. I had errors with Decorators. To fix them I used this [answere](https://stackoverflow.com/a/55822103/10540569) — Imanol, Nov 19 '20 at 08:24

Enhancing from Component in React with Material-UI

1 Answers1