CODEWITHSUNDEEP
reactjsmaterial-ui
Andrii Radkevych
Andrii Radkevych

Reputation: 3422

material ui styles inside react component

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

Upvotes: 3

Views: 6095

Answers (2)

rob2d
rob2d

Reputation: 1166

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);

Upvotes: 2

Richard Ansell
Richard Ansell

Reputation: 926

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);

Upvotes: 0

Related Questions