Give the possibility to create new Components using the Material theming system for unique behavior
See original GitHub issueDuplicates
- 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
Issue Analytics
- State:
- Created a year ago
- Reactions:7
- Comments:9 (5 by maintainers)
Top GitHub Comments
I’m on this!
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.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 😃