added props are directly passed to DOM element

[maapteh]

Steps to reproduce

In our own theme we augment an extra prop to Button, called dense. But the issue is on all elements where we add an extra prop.

declare module '@mui/material/Button' {
  interface ButtonOwnProps {
    dense?: boolean
  }

Now that totally works, we can use the prop in our styleOverride when creating our theme (using createTheme). But in the end it also lands in its DOM. Because in MUI components only MUI specifics per component are guarded to not end up there. In our example for Button MUI prevents:

https://github.com/mui/material-ui/blob/master/packages/mui-material/src/Button/Button.js#L78-L82

const ButtonRoot = styled(ButtonBase, {
  shouldForwardProp: (prop) => rootShouldForwardProp(prop) || prop === 'classes',

https://github.com/mui/material-ui/blob/master/packages/mui-material/src/styles/slotShouldForwardProp.ts#L2-L4

function slotShouldForwardProp(prop: string) {
  return prop !== 'ownerState' && prop !== 'theme' && prop !== 'sx' && prop !== 'as';
}

Current behavior

It passes newly added props directly to the DOM. Because MUI leans on Emotion. And Emotion doesn't like the transcient prop setup Styled Components is using, where we can use $ to filter these out.

Expected behavior

Maybe MUI can support the concept of a transcient prop, or at least tell which prop to not forward. Since externally we do not want a prop to be named $dense but dense :)

Context

We want to be as close as possible to MUI. We create its theme and use all existing props and additions. Which makes MUI very flexible. But the price we pay is that attributes get all the way to its DOM node itself. For which we should get a solution. Is ownerState the only solution?

Your environment

in all versions of MUI same behaviour

Search keywords: shouldforward, emotion

[mj12albert]

@maapteh In your app are you making custom UI components that wrap Material UI components (and add extra props etc), or importing directly from @mui/material throughout?

[maapteh]

Hi Albert. Yes so we augment the new prop to MUI (else it will not be known for MUI), in order to use it in the MUI createTheme

example when we create our Theme:

type StyleProps = ComponentStyleProps<'MuiButton'>

export const createMuiButton = ({ palette, misc }: Pick<Tokens, 'palette' | 'misc'>) => {
  const resolvePaletteColor = getButtonPalette(palette)
  return {
    MuiButton: {
      defaultProps: {
        variant: 'contained',
        size: 'medium',
        color: 'primary',
      },
      styleOverrides: {
            {
              props: { variant: 'text' },
              style: ({ color, dense }: StyleProps) => {

In our own composition we make it public, where MuiButton is the Button imported from @mui/material:

export type BaseButtonProps = BaseProps<HTMLButtonElement> &
  Pick<
    MuiButtonProps,
    | '...snip...'
    | 'variant'
  > & {

    dense?: boolean
  }

export const BaseButton = ({ children, sx, align = 'center', ...props }: BaseButtonProps) => (
  <MuiButton
    {...props}
    align={align}
    ...snip...
  >
    {children}
  </MuiButton>
)

Now in the past we directly styled on sx for own props (so no need to augment as well), but here the dense option is being used for button and set on many places in our createTheme.

some more example(s) in our createTheme when using the prop size:

        sizeSmall: ({ dense }: StyleProps) => ({
          height: dense ? spacing(1) : spacing(2),
          padding: dense ? 0 : spacing(1, 2),
          ...snip...
        }),
        sizeMedium: ({ dense }: StyleProps) => ({
          height: dense ? spacing(2) : spacing(3),
          padding: dense ? 0 : spacing(1.5, 2.5),
          ...snip...
        }),
etc

I do not understand why in the MUI documentation it lets augment newly introduced props when they directly become a DOM attribute of the component itself as well.
We tried not to forward it on our own styled composition, but then of course it doesn't land on the ownProps of MUI as well :) So I think this can only be solved on the MUI part :( Typing wise augmenting is perfect, only this side effect was unforseen on my side ...

We now hacked it to add a className for the prop and not augment it, so we can use the className on the theme creation. But thats not really scalable nor mentioned in the docs.

i snipped some parts to make it more readable.