Repository: material-ui
Issue: Apply `defaultProps` from theme to root `styled` component
Labels: waiting for 👍,package: system

### Duplicates

- [X] I have searched the existing issues

### Latest version

- [X] 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,](https://mui.com/system/styled/#styled-component-options-styles-component).

Perhaps a setting like this to allow handling some of MUI's use-cases

```ts
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`

```ts
styled('div', {
  name: 'MySheet',
  slot: 'Root',
  useDefaultProps: true,
})
```

### Examples 🌈

The following custom component

```tsx
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

```typescript
const theme = createTheme({
  components: {
    MySheet: {
            defaultProps: {
                variant: 'outlined',
            },
            styleOverrides: {
                root: sx({
                    borderRadius: 1,
                }),
                outlined: sx({
                    borderWidth: 1,
                    borderStyle: 'solid',
                }),
            },
        },
  }
});
```
and rendered like this

```tsx
<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`.

```tsx
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.