It is impossible to create a styled button having a component prop with TypeScript

[Rychu-Pawel]

Duplicates

• I have searched the existing issues

Latest version

• I have tested the latest version

Steps to reproduce 🕹

I have tried creating my basic styled button with a component prop and one custom prop in at least three different ways and none worked with TypeScript. I ended up creating a specialized CtaComponent instead of having one cool generic instead.

Composition

component.tsx

import * as React from 'react';

import Button, { ButtonProps } from '@mui/material/Button';

interface MyButtonProps extends ButtonProps {
    $cta?: boolean;
}

export default function MyButton(props: MyButtonProps) {
    return (
        <Button
            {...(props.$cta
            && {
                backgroundColor: `primary.main`,
                borderRadius: `10px`,
                border: `2px solid rgba(245,246,248,0.5)`,
                boxShadow: `0px 10px 15px -5px #80697E99`,
            })}
            {...props}
        />
    );
}

parent.tsx

<MyButton
    variant="contained"
    $cta={false}
    size="large"
    startIcon={<ComposeIcon />}
    sx={{
        '& .MuiButton-startIcon': {
            color: theme => theme.typography.body1.color,
            pr: 3,
        },
    }}
    component={NavLink} // <--- error
    to="/">
    Compose
</MyButton>

error:

Property 'component' does not exist on type 'IntrinsicAttributes & MyButtonProps'.ts(2322)

With styled() utility

component.tsx

import * as React from 'react';

import { styled } from '@mui/material/styles';
import Button, { ButtonProps } from '@mui/material/Button';

interface MyButtonProps extends ButtonProps {
    $cta?: boolean;
}

const MyButton = styled(Button)<MyButtonProps>(({ $cta, theme }) => ({
    ...($cta
    && {
        backgroundColor: theme.palette.primary.main,
        borderRadius: `10px`,
        border: `2px solid rgba(245,246,248,0.5)`,
        boxShadow: `0px 10px 15px -5px #80697E99`,
    }),
}));

export default MyButton as typeof Button & { $cta?: boolean };

parent.tsx

<MyButton
    variant="contained"
    $cta={false} // <--- error
    size="large"
    startIcon={<ComposeIcon />}
    sx={{
        '& .MuiButton-startIcon': {
            color: theme => theme.typography.body1.color,
            pr: 3,
        },
    }}
    component={NavLink}
    to="/">
    Compose
</MyButton>

error:

Property '$cta' does not exist on type [...]

Style overrides based on props

No component.tsx. Instead when creating the theme:

const getDesignTokens = (mode: PaletteMode): ThemeOptions => ({
    components: {
        MuiButton: {
            styleOverrides: {
                root: ({ ownerState, theme }) => ({
                    ...(ownerState.cta === true && {
                        backgroundColor: theme.palette.primary.main,
                        borderRadius: `10px`,
                        border: `2px solid rgba(245,246,248,0.5)`,
                        boxShadow: `0px 10px 15px -5px #80697E99`,
                    }),
                }),
            },
        },
    },
});

parent.tsx

<Button
    variant="contained"
    cta // <-- error
    size="large"
    startIcon={<ComposeIcon />}
    sx={{
        '& .MuiButton-startIcon': {
            color: theme => theme.typography.body1.color,
            pr: 3,
        },
    }}
    component={NavLink}
    to="/">
    Compose
</Button>

mui.d.ts

import "@mui/material/Button";

declare module '@mui/material/Button' {
    // tried everything here, nothing works...
}

error:

Property 'cta' does not exist on type [...]

Your environment 🌎

npx @mui/envinfo

``` System: OS: Windows 10 10.0.19045 Binaries: Node: 16.14.0 - C:\Program Files (x86)\nodejs\node.EXE Yarn: 1.22.5 - C:\Program Files (x86)\Yarn\bin\yarn.CMD npm: 8.3.1 - C:\Program Files (x86)\nodejs\npm.CMD Browsers: Chrome: 109.0.5414.120 Edge: Spartan (44.19041.1266.0), Chromium (108.0.1462.76) npmPackages: @emotion/react: ^11.10.5 => 11.10.5 @emotion/styled: ^11.10.5 => 11.10.5 @mui/base: 5.0.0-alpha.114 @mui/core-downloads-tracker: 5.11.5 @mui/icons-material: ^5.11.0 => 5.11.0 @mui/material: ^5.11.1 => 5.11.5 @mui/private-theming: 5.11.2 @mui/styled-engine: 5.11.0 @mui/system: 5.11.5 @mui/types: 7.2.3 @mui/utils: 5.11.2 @types/react: ^18.0.26 => 18.0.27 react: ^18.2.0 => 18.2.0 react-dom: ^18.2.0 => 18.2.0 typescript: ~4.9.4 => 4.9.4 ```

[github-actions]

👋 Thanks for using MUI Core!

We use GitHub issues exclusively as a bug and feature requests tracker, however,
this issue appears to be a support request.

For support, please check out https://mui.com/getting-started/support/. Thanks!

If you have a question on Stack Overflow, you are welcome to link to it here, it might help others.
If your issue is subsequently confirmed as a bug, and the report follows the issue template, it can be reopened.

[oliviertassinari]

I'm closing as I believe this issue raises multiple different questions that are already discussed in multiple other places. e.g. #15827