在React with TypeScript中向带样式的Material-UI props类添加属性,可以通过以下步骤实现:
import React from 'react';
import { makeStyles, Theme } from '@material-ui/core/styles';
import Button, { ButtonProps } from '@material-ui/core/Button';
makeStyles
函数创建一个样式钩子:const useStyles = makeStyles((theme: Theme) => ({
// 添加你的样式属性
customButton: {
// 样式属性
},
}));
ButtonProps
作为props类型:interface CustomButtonProps extends ButtonProps {
// 添加你的自定义属性
customProp: string;
}
const CustomButton: React.FC<CustomButtonProps> = ({ customProp, ...props }) => {
const classes = useStyles();
return (
<Button className={classes.customButton} {...props}>
{customProp}
</Button>
);
};
const App: React.FC = () => {
return (
<div>
<CustomButton customProp="自定义属性值" color="primary">
点击我
</CustomButton>
</div>
);
};
这样,你就可以在React with TypeScript中向带样式的Material-UI props类添加自定义属性了。注意,上述代码中的customButton
是一个自定义的样式类名,你可以根据自己的需求进行修改。
推荐的腾讯云相关产品:腾讯云云服务器(CVM)和腾讯云云函数(SCF)。你可以在腾讯云官网上找到这些产品的详细介绍和文档。
参考链接:
领取专属 10元无门槛券
手把手带您无忧上云