Skip to content

[styles] Theme default props are overriden by Component default props #20090

@adridavid

Description

@adridavid
  • The issue is present in the latest release.
  • I have searched the issues of this repository and believe that this is not a duplicate.

Current Behavior 😯

Using withStyles, theme default props are overriden by Component default props.

// Component
import Button from "@material-ui/core/Button";

const MyButton = props => <Button {...props} />;
MyButton.defaultProps = { variant: "outlined" };
const MyStyledButton = withStyles({}, { name: "MyButton" })(MyButton);

// Theme
const theme = createMuiTheme({
  props: {
    MyButton: {
      variant: "contained"
    }
  }
});

In the example above, the button will be outlined. It should be contained.

Moreover we don't have the same behavior if we use props destructuring with default values instead of defaultProps. In this case, the button would be contained.
Theme props work as expected for Material-UI components because they use props destructuring.

Expected Behavior 🤔

Theme default props should override Component default props.

Steps to Reproduce 🕹

A code sandbox example is available here.

Metadata

Metadata

Assignees

No one assigned

    Labels

    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