Currently, I am utilizing MaterialUI with some modifications to create a personalized library. My tool of choice for documentation is Storybook, using Typescript.
An issue I have encountered is that the storybook table props are not consistently auto-generated. It only displays the props I added, excluding those from material UI. An example is shown below:
import * as React from "react";
import MuiPaper from "@material-ui/core/Paper";
import clsx from "clsx";
export interface PaperProps extends MuiPaperProps {
/**
* If `true`, a darker background will be applied.
* @default false
*/
filled?: boolean;
/**
* If `true`, the border around the Paper will be removed.
* @default false
*/
disableOutline?: boolean;
}
const useStyles = makeStyles((theme: Theme) => ({
root: {
borderRadius: "8px",
border: `1px solid ${theme.palette.grey[200]}`,
"&$filled": {
backgroundColor: theme.palette.grey[100],
},
"&$disableOutline": {
border: "none",
},
},
/* Pseudo-class applied to the root element if `disableOutline={true}`. */
disableOutline: {},
/* Pseudo-class applied to the root element if `filled={true}`. */
filled: {},
}));
export const Paper: React.FC<PaperProps> = (props) => {
const { disableOutline = false, filled = false, ...restProps } = props;
const classes = useStyles();
return (
<MuiPaper
classes={classes}
className={clsx(classes.root, {
[classes.disableOutline]: disableOutline,
[classes.filled]: filled,
})}
{...restProps}
/>
);
};
Screenshots https://i.stack.imgur.com/xIF57.png
https://i.stack.imgur.com/JIUCv.png
In contrast, everything functions smoothly with MuiButton, which seems peculiar. The reason why it doesn't perform well with Paper remains a mystery to me.