CODEWITHSUNDEEP
reactjstypescriptmaterial-ui
ecoologic
ecoologic

Reputation: 10420

Wrapping a MUI Button to set some default props

My final objective is to find a way to reduce duplication, as I'm constantly using some properties like variant="contained", I would like them to be the default, but I don't think this is how you would use Themes.

EDIT: Actually I can and should use themes, I missed the props option, but I'm still interested in overriding the button if that makes sense.

In this approach I wrap the MUI Button in its own component, like so:

import { Button as MuiButton } from '@material-ui/core';
import { ButtonProps } from '@material-ui/core/Button/Button';


const Button: ExtendButtonBase<ButtonTypeMap> = (
  props: ButtonProps
) => {
  return (
    <MuiButton variant="contained" {...props}>
      {props.children}
    </MuiButton>
  );
};

const Form: FC = () => {
  return (
    <form>
      <MuiButton variant="contained" href="#">
        Works
      </MuiButton>
      <Button href="#">Doesn't</Button>
    </form>
  );
};

// ERROR
Type '(props: ButtonProps) => JSX.Element' is not assignable to type 'ExtendButtonBase<ButtonTypeMap<{}, "button">>'.
  Type '(props: ButtonProps) => JSX.Element' is not assignable to type '(props: { href: string; } & { children?: ReactNode; color?: Color | undefined; disabled?: boolean | undefined; disableElevation?: boolean | undefined; disableFocusRipple?: boolean | undefined; ... 5 more ...; variant?: "text" | ... 2 more ... | undefined; } & { ...; } & CommonProps<...> & Pick<...>) => Element'.
    Types of parameters 'props' and 'props' are incompatible.
      Type '{ href: string; } & { children?: ReactNode; color?: Color | undefined; disabled?: boolean | undefined; disableElevation?: boolean |

I don't understand why my props are not accepted as they seem to be in the list of the type union.

PS: I'd be also interested if there's a better way of achieving this.

Upvotes: 1

Views: 4209

Answers (1)

svrbst
svrbst

Reputation: 167

ExtendButtonBase<ButtonTypeMap> and ButtonProps are two different types.

You only need to pass the ButtonProps to FC once like this

const Button: FC<ButtonProps> = (props) => {
  return (
    <MuiButton variant="contained" {...props}>
      {props.children}
    </MuiButton>
  );
};

But if you want to set variant="contained" as a default, aleksxor's answer is the correct approach.

Upvotes: 1

Related Questions