CODEWITHSUNDEEP
reactjsmaterial-ui
rick
rick

Reputation: 751

Alternative to useStyles (makeStyles) - MUI v5

Many system components are styled using this pattern.

import React from "react";
import { makeStyles } from "@mui/styles";
import FormControl from "@mui/material/FormControl";

const useStyles = makeStyles((theme) => ({
    formControl: {
        color:props=>props.color || 'black',
        margin: '17px 8px 8px 8px',
        '& .MuiFormLabel-root': {
            top:'-19px !important',
        },
    },
}));

const FieldText=()=>{
    const classes = useStyles()

    return (
        <FormControl className={classes.formControl}>
           <input type="text" />
        </FormControl>
    )
}

export {FieldText}

With Material-UI v4 → v5 update, you should use themeProvider.

enter image description here

What would be the best way to keep the same style structure? And this can perform the same internal component selection operations like these "& .muiFormLabel" and "props=>props.color"

Upvotes: 2

Views: 3680

Answers (1)

Luis Paulo Pinto
Luis Paulo Pinto

Reputation: 6036

You should probably go with styled:

import { alpha, styled } from '@mui/material/styles';

const SuccessSlider = styled(Slider)<SliderProps>(({ theme }) => ({
  width: 300,
  color: theme.palette.success.main,
  '& .MuiSlider-thumb': {
    '&:hover, &.Mui-focusVisible': {
      boxShadow: `0px 0px 0px 8px ${alpha(theme.palette.success.main, 0.16)}`,
    },
    '&.Mui-active': {
      boxShadow: `0px 0px 0px 14px ${alpha(theme.palette.success.main, 0.16)}`,
    },
  },
}));

export default function StyledCustomization() {
  return <SuccessSlider defaultValue={30} />;
}

You can see this same example here. (Although the above example does not show the option, it is also possible to use props).

You can check more here.

Upvotes: 1

Related Questions