Give the possibility to create new Components using the Material theming system for unique behavior

Duplicates

• I have searched the existing issues

Latest version

• I have tested the latest version

Summary 💡

Lets say I use material ui and want to create a generic component of some sort to serve me and my team. For example let’s assume Alert component didn’t exist, and I wanted to create Alert component that would take some stylings from the Theming system of material UI. I’ve seen in the source code that useThemeProps is used but it does not seem to be public or documented. I wanted to ask If you are planning on making it public so I could create my own components and being able to easily use themes and variants for my new components.

Let me know what you think 😃

Examples 🌈

const theme = createTheme({
  components: {
    MyCustomComponent: {
      variants: [
        {
          props: { variant: 'dashed' },
          style: {
            textTransform: 'none',
            border: `2px dashed ${blue[500]}`,
          },
        },
        {
          props: { variant: 'dashed', color: 'secondary' },
          style: {
            border: `4px dashed ${red[500]}`,
          },
        },
      ],
    },
  },
});


export function MyCustomComponent() {
const themeProps = useThemeProps(..., 'MyCustomComponent');

// do stuff with the theme props

return ...
}

Motivation 🔦

The primary motivation would be - Any project that would use material UI would instantly gain much more flexibility and potentially be “complete” because we would be able to accomplish anything as users, creating any component we would like while leveraging the tools material gives us.

Secondly I believe that if this kind of API would be documented and public, It would be easier for people to extend the core of Material and contribute at ease and much more frequently.

Let me know what you think, Cheers

[siriwatknp]

I’m on this!

[mnajdova]

Then, use the styled method from @mui/system or @mui/material to support the sx props and allow code like

Always use exports from @mui/material if you are already using this package, and the system otherwise (for example building your own design system with unstyled components). The difference is the default theme that will be used.

I found that all those steps added too much boilerplate to components, so I created a higher order component to do all of those steps. I would love some feedback on this one (I was also wondering why it does not exist in MUI, at least for internal use).

We were considering something similar, but decided to go with the less abstract definition, as it is much more readable and easy to understand for people coming to the codebase for the first time 😃