MUI 5 风格按钮缺少道具

Question

我正在尝试在单独的组件中实现基于 MUI5 的样式按钮，如下所示：

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

interface MxFlatButtonProps extends Omit<ButtonProps, 'size' | 'variant'> {
}

const DEFAULT_PROPS: ButtonProps = {
    variant: 'text',
    size: 'medium',
    color: 'primary'
};

const StyledFlatButton = styled(Button)(({theme: {spacing}}) => ({
    minWidth: 'auto',
    lineHeight: 1,
    // a bit more styles
}));


export const MxFlatButton = (props: MxFlatButtonProps) =>
    <StyledFlatButton
        {...DEFAULT_PROPS}
        {...props}
    />;

在我应用

component

和

to

道具之前，它工作得很好，而不是使用纯 MUI

Button

组件。

这里我得到一个错误：

import {Link as RouterLink, useLocation} from 'react-router-dom';

// some code skipped

<MxFlatButton
    component={RouterLink}
    to='someLink'
>
    Some text
</MxFlatButton>

错误如下：

TS2322: Type

{
     children: string;
     component: <S = unknown>(props: LinkProps<S> & RefAttributes<HTMLAnchorElement>) => ReactElement<any, string | JSXElementConstructor<any>> | null;
     to: string;
}


is not assignable to type IntrinsicAttributes & MxFlatButtonProps
    Property to does not exist on type IntrinsicAttributes & MxFlatButtonProps

版本如下：

"@mui/material": "5.15.15",
"@mui/styles": "5.15.15",
"react-router": "^5.1.2",
"react-router-dom": "^5.1.2"

我错过了什么？我以为样式按钮会继承 MUI 按钮的 props，但我错了。

Answer 1

我无法给你一个明确的答案，但我可以告诉你，你的样式组件没有任何问题，你做的一切都是对的。看看这个：

"use client";

import { MxFlatButton } from "@/components/test";
// import { Link, useLocation } from "react-router-dom";
import Link from "next/link";

export default function Home() {
    return (
        <main>
            <div>main</div>
            <MxFlatButton component={Link} href="google">
                Some Text
            </MxFlatButton>
        </main>
    );
}

因为我在next js上，所以我使用来自nextjs路由的Link。但上面的代码可以按预期工作！这表明道具已正确传递给样式组件。

为什么它不能与来自react-router-dom的Link一起使用？我不确定，但如果你尝试用

to

代替

href

作为道具，它将提供有关问题的更多信息。