makeStyles vs withStyles (with Example) without react refs

going forward is makeStyles what you’re looking to do?

seems a lot easier than all the ref spam? is there any reason NOT to do this ? asking as both from a material-ui perspective and authoring components externally

I randomly picked the Avatar as an example and just put it inside one of the example dashboard apps… attached a pic of devtools passing mui name correctly

import React from 'react';
import clsx from 'clsx';
import {withStyles, makeStyles} from '@material-ui/styles';

export const useAvatarCss = makeStyles(theme => ({
  /* Styles applied to the root element. */
  root: {
    position: 'relative',
    display: 'flex',
    alignItems: 'center',
    justifyContent: 'center',
    flexShrink: 0,
    width: 40,
    height: 40,
    fontFamily: theme.typography.fontFamily,
    fontSize: theme.typography.pxToRem(20),
    borderRadius: '50%',
    overflow: 'hidden',
    userSelect: 'none',
  },
  /* Styles applied to the root element if there are children and not `src` or `srcSet`. */
  colorDefault: {
    color: theme.palette.background.default,
    backgroundColor:
      theme.palette.type === 'light' ? theme.palette.grey[400] : theme.palette.grey[600],
  },
  /* Styles applied to the img element if either `src` or `srcSet` is defined. */
  img: {
    width: '100%',
    height: '100%',
    textAlign: 'center',
    // Handle non-square image. The property isn't supported by IE 11.
    objectFit: 'cover',
  },
  system: {}
}), { name: 'MuiAvatar' })


type AvatarBaseProps = {
  alt?: string;
  childrenClassName?: string;
  imgProps?: React.HtmlHTMLAttributes<HTMLImageElement>;
  sizes?: string;
  src?: string;
  srcSet?: string;
  component?: any
} & React.HTMLProps<any>

export function Avatar(props: AvatarBaseProps) {
  const {
    alt,
    children: childrenProp,
    childrenClassName: childrenClassNameProp,
    //classes,
    className: classNameProp,
    component: Component,
    imgProps,
    sizes,
    src,
    srcSet,
    ...other
  } = props;

  const classes = useAvatarCss()
  let children = null;
  const img = src || srcSet;

  if (img) {
    children = (
      <img
        alt={alt}
        src={src}
        srcSet={srcSet}
        sizes={sizes}
        className={classes.img}
        {...imgProps}
      />
    );
  } else if (childrenClassNameProp && React.isValidElement<any>(childrenProp)) {
    children = React.cloneElement<any, any>((childrenProp as any), {
      className: clsx(childrenClassNameProp, childrenProp.props.className),
    });
  } else {
    children = childrenProp;
  }

  return (
    <Component
      className={clsx(classes.root, classes.system, {
        [classes.colorDefault]: !img,
      }, classNameProp)}
      //ref={ref}
      {...other}
    >
      {children}
    </Component>
  );
}

 Avatar.defaultProps = {
  name: 'MuiAvatar',
  component: 'div',
};

export default Avatar

[oliviertassinari]

@jeremy-coleman makeStyles and withStyles have their own use cases. I would use the API that reduces boilerplate. In doubt, I would use makeStyles over withStyles. The main use case of withStyles is for building custom variations of our components. To answer your question, yes, it’s fine 👍.

[eps1lon]

@oliver bc things kept breaking, wrong types, themes not applying , multiple versions of jss, etc etc. i also wanted to take out prop types for dev. Prod build is much smaller, 500kb pre 70k post minify

@jeremy-coleman It seems like you’re pretty frustrated which results in you making statements that aren’t very constructive. I understand that this is a rant but please keep it civil.

That being sad let’s try to unpack your statement:

things kept breaking

I would like to help you but I need specifics for those: What did you do? What did you expect? What happened instead?

wrong types

Types in the core are not coupled with the implementation. withStyles or makeStyles usage in the implementation does not change our types.

themes not applying

withStyles is just a hoc wrapper around makeStyles. It seems unlikely that the usage causes this breakage.

multiple versions of jss

This could happen in earlier alphas if you didn’t follow our installation instructions for @material-ui/styles. Since withStyles uses makeStyles now there shouldn’t be duplicate versions of jss anymore.

Prod build is much smaller, 500kb pre 70k post minify

This is self-evident: If you remove features your bundle will be smaller. Also 500k is probably post minify and 70k post compression. 70k before compression doesn’t sound like it’s bundling the full @material-ui/core bundle.