Apply `defaultProps` from theme to root `styled` component

Duplicates

• I have searched the existing issues

Latest version

• I have tested the latest version

Summary 💡

defaultProps defined under a custom component name should be picked up and applied by styled component, even if it required a setting within the styled function call. Currently variants and styleOverrides inside the theme can be referenced and used by styled components and are configurable using some of its options,.

Perhaps a setting like this to allow handling some of MUI's use-cases

styled('div', {
  name: 'MySheet',
  slot: 'Root',
  defaultPropsResolver: (defaultProps) => ({ ownerState: defaultProps })
})

or just a boolean parameter which enables or disables the styled component from accessing theme.components[name].defaultProps

styled('div', {
  name: 'MySheet',
  slot: 'Root',
  useDefaultProps: true,
})

Examples 🌈

The following custom component

export interface SheetProps {
    variant?: 'plain' | 'outlined';
}

const SheetRoot = styled('div', {
    name: 'MySheet',
    slot: 'Root',
    shouldForwardProp: (prop) => {
        switch (prop) {
            case 'variant':
            case 'sx':
                return false;
            default:
                return true;
        }
    },
    overridesResolver: ({ color, variant, padded }, styles) => [
        styles.root,
        variant === 'plain' && styles.plain,
        variant === 'outlined' && styles.outlined,
    ],
})<SheetProps>({});

With the following theme definition

const theme = createTheme({
  components: {
    MySheet: {
            defaultProps: {
                variant: 'outlined',
            },
            styleOverrides: {
                root: sx({
                    borderRadius: 1,
                }),
                outlined: sx({
                    borderWidth: 1,
                    borderStyle: 'solid',
                }),
            },
        },
  }
});

and rendered like this

<MySheet />

will NOT have its variant prop be set to outlined. Instead, by referencing some MUI components we see that useThemeProps is needed to extract the defaultProps from the theme.

const Sheet: FC<SheetProps> = (props) => {
    const compProps = useThemeProps({ name: 'MySheet', props });

    return <SheetRoot {...compProps} />;
};

This wrapper component is usually where classNames are generated and more complex components compose all their styled sub components. So it's only natural for Mui core components to require these defaults though the useThemeProps before the style component is even rendered.

Motivation 🔦

Having to wrap each custom component just to call a hook which passes a key we're already feeding into the styled component feels very redundant. Not to mention it adds to boilerplate for typescript and ref usage. Our projects share a base theme with custom properties and some custom styled components are also registered using the theme.components object. It would be very helpful to give each theme override a different set of defaultProps for our custom components.

Start with the styled component options and the useThemeProps example shown in the issue, then trace how theme components currently provide variants and styleOverrides to styled components. Done means a root styled component can receive theme.components[name].defaultProps without a wrapper while preserving existing theme styling behavior; the issue does not name specific files or tests.