material ui styles inside react component

Question

Here you can see example of using material ui styles outside of a react component.

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

const useStyles = makeStyles({
  root: {
    background: 'linear-gradient(45deg, #FE6B8B 30%, #FF8E53 90%)',
    border: 0,
    borderRadius: 3,
    boxShadow: '0 3px 5px 2px rgba(255, 105, 135, .3)',
    color: 'white',
    height: 48,
    padding: '0 30px',
  },
});

export default function Hook() {
  const classes = useStyles();
  return <Button className={classes.root}>Hook</Button>;
}

I want to do the same, but inside react component:

class Component extends React.Component {

render() {

const {height} = this.props

const useStyles = makeStyles({
  root: {
    background: 'linear-gradient(45deg, #FE6B8B 30%, #FF8E53 90%)',
    border: 0,
    borderRadius: 3,
    boxShadow: '0 3px 5px 2px rgba(255, 105, 135, .3)',
    color: 'white',
    height: height,
    padding: '0 30px',
  },
});

const classes = useStyles();

return <Button className={classes.root}>Hook</Button>;
}}

Is it possible?

I see that here have to be correct version of react with hooks , but I've not found any example where peoples use it inside class makeStyles

rob2d · Accepted Answer · 2019-07-09 16:50:35Z

makeStyles creates a React hook; because of this, you cannot inter-operate with class components.

Hooks are used to replace classes entirely since React is moving more in the direction of purely functional components for the sake of compiler optimizations and other low level things (though there are external benefits for devs as well such as being less verbose and taking better advantage of and being more intuitive with the functional nature of JS). In the case of makeStyles, you get additional benefits such as being able to use any variable including those from what would traditionally be props and state, and automatically your JSS re-calculates only based on observable params you have provided vs when any prop changes.

Instead, as @Richard Ansell pointed out, you should use withStyles if you are not comfortable outside classes. This is a High Order Component. Would suggest though that in newer code bases, you learn hooks and adapt to that as hooks can represent almost all functionality from both HOCs and components when you become better at them.

Below is the example given from the material-ui documentation (RTFM here):

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

const styles = {
  root: {
    background: 'linear-gradient(45deg, #FE6B8B 30%, #FF8E53 90%)',
    border: 0,
    borderRadius: 3,
    boxShadow: '0 3px 5px 2px rgba(255, 105, 135, .3)',
    color: 'white',
    height: 48,
    padding: '0 30px',
  },
};

function HigherOrderComponent(props) {
  const { classes } = props;
  return <Button className={classes.root}>Higher-order component</Button>;
}

HigherOrderComponent.propTypes = {
  classes: PropTypes.object.isRequired,
};

export default withStyles(styles)(HigherOrderComponent);

Richard Ansell · Accepted Answer · 2019-03-15 10:11:05Z

0

From what I can gather, you can simply use the withStyles API that can wrap your component and inject your style directly into your exported component. See the following page that will explain this in more detail: withStyles

Example:

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

const styles = {
    root: {
        background: 'linear-gradient(45deg, #FE6B8B 30%, #FF8E53 90%)',
        border: 0,
        borderRadius: 3,
        boxShadow: '0 3px 5px 2px rgba(255, 105, 135, .3)',
        color: 'white',
        padding: '0 30px',
    },
};

function HigherOrderComponent(props) {
    const { classes, customHeight } = props;
    return <Button className={classes.root} style={{minHeight: customHeight, maxHeight: customHeight}}>Higher-order 
    component</Button>;
}

HigherOrderComponent.propTypes = {
    classes: PropTypes.object.isRequired,
    customHeight: PropTypes.object.isRequired
};

export default withStyles(styles)(HigherOrderComponent);

edited Mar 15, 2019 at 10:11

answered Mar 15, 2019 at 0:30

Richard Ansell

9261 gold badge13 silver badges29 bronze badges

7 Comments

Andrii Radkevych Over a year ago

Can you send me example ? I don't see that withStyles can solve my issue

Richard Ansell Over a year ago

Please see the example above that shows you how to export a React component with a style applied, hope this helps.

Andrii Radkevych Over a year ago

Check pls my example , I want to change height dynamically in css (const {height} = this.props) , it have to be inside of the class .

Richard Ansell Over a year ago

I've updated my answer to show how you can pass in the height dynamically. This appears to be somewhat of a limitation of React Material UI, yet the above should allow you to set the button size as you wish as a required prop.

Andrii Radkevych Over a year ago

If use style parameter , then I don't even need withStyles , I can declare all props inside style={style.root} , I don't think that this is correct to use style .

|

Collectives™ on Stack Overflow

material ui styles inside react component

2 Answers 2

Comments

7 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

7 Comments

Your Answer

Sign up or log in

Post as a guest

Related