从父组件传递参数以自定义 MUI 按钮颜色（React-typescript）

Question

我一直在使用 typescript 在 create-React-App 上实现 MUI (v5)。我有一个自定义主题等等。

我想创建一个 MyButton 组件，它采用引用我的 theme.palette 的 buttonType 道具（字符串类型）并将其传递给它所构建的 MuiButton 以定义其颜色。

我尝试了几种方法。

MUIButton 的颜色道具似乎不接受任何变量，即使它们的类型与定义它的枚举相匹配。 doc here
除非指定 !important，否则不会应用类 doc here
将 buttonType 传递给 useStyle return 出错。 doc here

这里是代码：

在 App.tsx 文件中：

function App() {
    return (
        <div className="App">
            <h1>My customized buttons</h1>
            <div className="buttonContainer">
                <MyButton buttonType={'primary'}/>
                <MyButton buttonType={'secondary'}/>
                <MyButton buttonType={'warning'}/>
                <MyButton buttonType={'error'}/>
                <MyButton buttonType={'success'}/>

            </div>
        </div>
    );
}

在 MyButton.tsx 文件中：

import MuiButton, {ButtonProps as MuiButtonProps} from '@mui/material/Button';
import {makeStyles} from '@material-ui/core/styles';

const useStyles: any = makeStyles((theme: Theme) => ({
    root: {
        border: '3px solid red',
        borderRadius: 5,
        padding: theme.spacing(1, 2),
        margin: theme.spacing(2),
    },
}));

const useButtonStyles: any = makeStyles((theme: Theme) => ({
    root: {
        border: '3px solid blue',
        backgroundColor: (buttonType: string )=>buttonType,      
    },
}));


function MyButton({buttonType = 'primary'}: MyButtonProps) {
    const classes = useStyles();
    const buttonClasses = useStyles(buttonType);
...

return(

       <div>
            <MuiButton classes={classes}>Button only makeStyle</MuiButton>

            <MuiButton classes={classes} color={'primary' === buttonType ? 'primary' : buttonType}>Button {buttonType}</MuiButton>

            <MuiButton classes={buttonClasses}> Color defined in MakeStyle with {buttonType} </MuiButton>

            {/*color passed as string get theme.palette colors without issue */}
            {/*<Button color="error">Button Error</Button>*/}
            {/*<Button color="warning">Button warning</Button>*/}
            {/*<Button color="success">Button success</Button>*/}
       </div>
);
}

export default MyButton;

interface MyButtonProps {
    buttonType: 'inherit' | 'primary' | 'secondary' | 'success' | 'error' | 'info' | 'warning' | string,
}

Answer 1

可能您需要从 MuiButtonProps 扩展 MyButtonProps，然后再将其设置为您的自定义按钮组件道具类型。

interface MyButtonProps extends MyButtonProps {
    buttonType: 'inherit' | 'primary' | 'secondary' | 'success' | 'error' | 'info' | 'warning' | string,
}

从父组件传递参数以自定义 MUI 按钮颜色（React-typescript）

Passing argument from parent component to customize MUI Button color (React-typescript)

typescript

reactjs

material-ui

react-tsx