Skip to content

[several components] replace "withStyles" with "useStyles" in internal component implementations #17654

@croraf

Description

@croraf
  • I have searched the issues of this repository and believe that this is not a duplicate.

Summary 💡

One of the main reasons React introduced hooks was to remove the long component tree chains in react-devtools, arising when HOCs are used.

MUI uses withStyles internally which gives rise to much longer component tree chains in react-devtools. I suggest to switch to the equivalent useStyles syntax in internal implementations.

Check: https://codesandbox.io/s/hoc-hook-comparisson-mui-h6oq9

image

Specific example of Button MUI component has:
image
Instead of much simpler:
image

Metadata

Metadata

Assignees

No one assigned

    Labels

    duplicateThis issue or pull request already exists.scope: systemThe system, the design tokens / styling foundations used across components. eg. @mui/system with MUI

    Projects

    No projects

    Milestone

    No milestone

    Relationships

    None yet

    Development

    No branches or pull requests

    Issue actions