Component customization and extension related issues

[siriwatknp]

This umbrella issue collects customization-related issues to help the core team see the big picture about the underlying problems (could be poor documentation, lack of features, etc.). Once we have identified and categorized the problems, we will prioritize the work and ask for help from the community.

For the community, feel free to jump into the discussion and share your thoughts, use cases, needs, or anything that you think it is important for us to consider.

As a first draft, I have gone through 30 pages of issues (til Jun 2021) and grouped the issues based on my understanding:

Extending theme variants

• Add shouldForwardProp to theme #34831: to apply styles based on the custom prop which spread to DOM.
• Make component theme default props variant-aware #34812: able to set the default props based on the theme.
• Allow use styleOverrides to target parts in new component variants #34715: want to target child slots in theme variants.
• [Button] size prop does not work alongside variant prop #34600: (specific to Button) custom variant does not work with size prop.
• [material-ui][Button] Variants don't consume the size prop #32427
• [Paper] Custom variants disregard elevation prop #34615: (specific to Paper) custom variant does not work with elevation prop.
• [Typography] Cannot customize primary/error color #34290: (specific to Typography) color prop, becomes sx at the end, overrides the styleOverrides.
• Tabs component Typescript types can't be extended for custom variants #33785: (specific to Tabs) can't extend the variant because the logic is bind to the values.
• [material] Add variant prop type in all components #33510: all components should have a variant prop to be extendable (the author mentioned that the docs is misleading).
• Custom new variant throws error but works #31204: (specific to Menu) can't extend the variant because the logic is bind to the values.
• No way to define Box variants? #29524
• Adding new component variants does not work as documented for all components #29455
• Can't new create inputs variants #28671: (specific to Input) can't extend the variant because the logic is bind to the values.
• [Slider] Implement variant prop #27130
• Allow variant overrides in Card #27267
• Add variant prop to Table component #34885

Custom components

• No Auto-completions / Suggestions for Custom styled components! #34768: a custom component via MUI styled does not bind to theme typings.
• Apply defaultProps from theme to root styled component #34539: basically move useThemeProps to an option in styled.
• skipSx should update shouldForwardProps #31019
• [system] component prop lost when wrapping with styled #29875
• Adding Component Attribute into Styled Components #29492: request API like styled-components attrs

Composition

• [LoadingButton] Add ability to control size of circular progress #33018: missing componentsProps in LoadingButton

Theming

• [Dark Theme] Using Dark Theme when theme is in a separate file? #34294: adopting dark mode.
• slots overrides do not merge with the theme #34214: should shallow merge slots with theme default props.
• [Docs] Include examples of the theme customization with hover #33387: need examples to demonstrate the best practices for customizing TextField and Autocomplete.
• [theme] Give same treatment to custom mixins as internal createMixins (as done with createTypography) #32721: custom mixins
• Inventory of how to customize the global theme in v5  #32150: ask for clarity about the theming capability
• TS Augmentation not working when adding new props in v5 #31094: want to styles using the new props
• Button | Typescript | Add TS overrides for top level button props (in addition to variant, color, and size) #28754: want to styles using the new props
• Allow responsive CSS in Typography theme #30484: responsive typography creation
• [theme] Custom "Built-in/Default" Theme  #30037: theming without using ThemeProvider
• Can't use global theme overrides for Button disabled #29644
• Documentation for extending theme is wrong. Module Augmentation does not work. #29008
• Support Shadows overrides #28820
• [IconButton] Custom non-palette color causes TypeError #33054: extending color palette
• Allow using linear-gradient color in theme palette #35159
• [Bug] Wrong theme.shape.borderRadius definition in d.ts #35156
• useLocale Hook to access the current locale set in the Theme object #34900: How to attach a custom object to the theme (locale in this case)

sx prop

• Add support for aliases / tokens (all components) #33525: want to custom sx functionality to support other aliases.
• Allow emmet CSS shorthands in the sx prop #29734
• [system] Allow to extend the system without creating a new component #32734
• Multiple arity in sx prop #33281: sx spacing support
• [theme] Add theme color strong typing onto the sx color properties #32656: Typed color-related properties with the theme palette
• [system] Add support & usage of CSS logical properties #32198
• [system] Support top, left, right and bottom as spacing values #30725

Others

• Sx styles are not compatible with emotion css util #33686: want to use css to get the same experience as makeStyles.
• [Typography] color prop is not documented but it works #32269: Typography color confusion.
• [Button] using nested custom color #30420: Button color confusion
• [link] Support extending theme color with color prop #29596: Link color confusion
• [Palette] Custom palette with main color provided, other colors is not calculated #29595: color and theme palette confusion
• [FormControl] Form Label not respecting the color prop #32274: the mismatched expectation of what the color prop does
• [LinearProgress] color="action.disabled" is crashing #32270: inconsistent color prop causes confusion
• Export theme augmentation from package #31097: how to create theme augmentation for use in different projects
• Customize color shadow by property or variant #30869: related to shadows
• [typescript] Typography in theme typed as unknown #30678: theme typography typings
• [system] Official support for unstable_breakpoints-related functions #29864
• [Discussion] Support some (or maybe all?) non-integer values passed to theme.spacing() #29677: theme spacing functionality
• TS Module augmentation for adding variants to components not working #28244
• [system] Propagate custom style props to component SxProps. #27673: MUI system style
• Global fonts not being applied on custom variants #35939

[tomsseisums]

Does it make sense to include #32967 as well under this umbrella?

[siriwatknp]

Does it make sense to include #32967 as well under this umbrella?

Thanks, it should be included!

[mnajdova]

Thanks for creating this umbrella issue @siriwatknp It shows really nicely the different aspects of the problem.

[samuelsycamore]

Thanks for putting this together @siriwatknp!! 🙌

[nike1v]

Migrated to v6 and implemented own theme solution inly to see that I can't use my custom palette as a color prop, because it have 3 level of depth and I haven't found a way to use the nested property from the palette.

[ChristianGrete]

The list is still missing #19466.