CODEWITHSUNDEEP
reactjssassmaterial-ui
lane
lane

Reputation: 679

For a React app theme, is there an advantage of material-ui makeStyles vs. SCSS architecture?

I just joined a team developing a React app. We are currently relying on Material UI, including makeStyles, to style the app. One of my tasks is going to be to suss out our global theme. In my tradition, I've relied on LESS and SCSS to implement app styling and theme architecture.

Is there an advantage to sticking with Material UI makeStyles (aside from the fact that it has already been implemented) over switching up theme architecture to use SCSS?

Upvotes: 2

Views: 3093

Answers (2)

Bobby Connolly
Bobby Connolly

Reputation: 355

I use both makeStyles and scss pretty interchangeably.

However, I would avoid mixing them at the component level... that could be confusing.

Upvotes: 2

xIsra
xIsra

Reputation: 915

The makeStyles is a great way to use a theme based UI. It allows you to use commom properties and methods to generate style based configured variables.

Hook usage with theme:

const useStyles = makeStyles((theme:MyCustomTheme)=>{
  root: {
    background: 'linear-gradient(45deg, #FE6B8B 30%, #FF8E53 90%)',
    border: theme.myBorder,
    borderRadius: 3,
    boxShadow: theme.shaodws.boxShadowPrimary,
    color: theme.colors.primary,
    height: theme.size(1),
    padding: '0 30px',
  },
});

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

Also you can provide custom props when implementing the hook:

const useStyles = makeStyles((theme:MyCustomTheme)=>{
  root: (props) => ({
    border: props.hasBorder ? theme.myBorder : 'none',
    color: props.textColor || theme.color.text.pirmary
  })
});

export default function MyCustomThemeButton(props) {
  const [active, setActive] = useState(false);
  const classes = useStyles({
    hasBorder: props.isOutsideBox,
    textColor: active ? "red" : "yellow"
  });
  return <Button className={classes.root}>Hook</Button>;
}

To read more on the topic: Material UI styles

Upvotes: 1

Related Questions