possibility to override defaultProps of custom styled components

[dberardo-com]

Summary

following this i am creating themed components: https://mui.com/material-ui/customization/theme-components/#creating-new-component-variants

styled overrides work fine, but now i would like to override defaultProps from the theme as well, this is not possible currently.

would it be possible at least to override defaultProps from inside the styled()({ .... }) declaration ?

Examples

No response

Motivation

No response

Search keywords: theme components

[imadx]

Isn't this what you are looking for @dberardo-com ? https://mui.com/material-ui/customization/theme-components/#theme-default-props

[dberardo-com]

thanks for the quick reply.

i would like to keep defaultProps for native MUI element untouched, and change them only for my custom elements

[imadx]

In that case, have you considered overriding the default props inside the custom component?

[dberardo-com]

this would work of course, but i am not defining a custom component in that way, but simply using styled:

export const MyButton = styled(Button, {name: "MyButton", slot: "root"})({})

[imadx]

Got it, Thanks for clarifying.

I'd say the styled components are for defining the styles.
But your idea of using prop overrides for creating new components is actually interesting. Let's wait for the thoughts from the maintainers.

[dberardo-com]

i see ... i thought that was the whole point of it :D

thanks for the reply

[brijeshb42]

As of right now, it's not supported the way you are expecting. We could probably add a way to override default props through the second argument of styled -

const MyButton = styled(Button, {
  defaultProps: {
    // new props
  }
})()

But I'd say this would be least on our priorities right now.

@DiegoAndai Your thoughts ?

[dberardo-com]

thanks for evaluating this suggestion. indeed i can wrap the styled component around a functional one for now, but i just wanted a more elegant solution.

i think it would be enough to make this point more explicit from the documentation, in fact i am still wondering what can be overriden within the theme for themed styled component. i am assuming that only the "stylesOverride" part of the theme has an impact on the themed styled component, but again, that is just my assumption. i guess it would be great if the doc clearly states that, so no misambiguity arise.

btw FYI what i am trying to achieve here is the following:

• every user of my app has the ability to upload a logo picture
• the app loads a different MUI theme per each user
• the link to the logo is defined as a MyCustomCardMedia.defaultProps.image attribute of the theme

for now i use stylesOverride, but just wanted to know whether i could achieve that with defaultProps, which seems not to be the case.

cheers

[DiegoAndai]

We could probably add a way to override default props through the second argument of styled

I'm not sure about this API, seems like we would be coupling the styled call with business logic.

@dberardo-com reading your use case, I think it would be better to decouple your logic from the theme. Instead of using the theme's default props, why not create a separate context in which the logo link is propagated, and then the component can read from it?

[dberardo-com]

i would love to use MUITheme because it has a pre-defined and pre-documented structure, so it is much easier to adopt and more robust.