Material-ui: makeStyles does not use component name if no name option is provided.

[madflanderz]

makeStyles does not fall back to the component name if no name option is provided.

According to the docs the generated classname should include the component name when no name option is provided:

options.name (String [optional]): The name of the style sheet. Useful for debugging. If the value isn't provided, it will try to fallback to the name of the component.

• [x] The issue is present in the latest release.
• [x] I have searched the issues of this repository and believe that this is not a duplicate.

Current Behavior 😯

Here is an example component:

const useStyles = makeStyles(
  {
    root: {}
  }
);

export function MyComponent() {
  const classes = useStyles({});
  return <div className={classes.root}>YEAH</div>;
}

The generated classname looks like this:
makeStyles-root-123

Only when you provide a name option you get correct classname:

const useStyles = makeStyles(
  {
    root: {}
  },
  {
    name: "MyComponent"
  }
);

Wiell generateMyComponent-root-123

Expected Behavior 🤔

The generated classname looks like this without providing a name option.
MyComponent-root-123

Steps to Reproduce 🕹

https://codesandbox.io/s/epic-sinoussi-7mktq

When no name option is set in makeStyles then i never get the component name in the classname. Even if compoent has a displayname set or is a named function.

Context 🔦

The goal is to have good looking classnames like MyComponent-root-123 instead of makeStyles-root-123

Your Environment 🌎

| Tech | Version |
| ----------- | ------- |
| Material-UI | v4.9.0 |

[oliviertassinari]

@madflanderz Agree, it's a significant downside, we had this problem reported in the past. However, we have stopped investment in our styling solution, see #6115.

[madflanderz]

@oliviertassinari Alright,makes sense. Then maybe we should just remove this text from the docs and it's fine.

I like the "name" option and readable classNames so much, that's why i created a eslint plugin to ensure developer does not forget to set the name.

Here you can find the plugin:
https://www.npmjs.com/package/eslint-plugin-makestyles

Maybe this could be added to the docs as well.

[oliviertassinari]

The eslint plugin looks awesome! As this concern should move to react-jss, it would also be interesting to look into a babel plugin that does it behind the scene, saving developers time.

[eps1lon]

The docs are simply wrong since this was just copied over from withStyles. There's no way makeStyles can fall back to the component name since it doesn't know in which component(s) the hook will be used.

We should adjust the docs to reflect that it will fall back to makeStyles-X.

[hesto2]

working on this (seems like a really easy first issue 😂 )