I'm encountering an error in a small React app. Here is a screenshot of the issue: https://i.sstatic.net/ilXOT.png
The project uses "@material-ui/core": "4.11.3". In the codebase, there is a component named Text.tsx with its corresponding styles defined in Text.styles.tsx. The styles are created using the makeStyles function.
text.styles.tsx
import { makeStyles, Theme } from '@material-ui/core';
interface StyleProps {
marginRight: number;
marginLeft: number;
}
const useStyles = makeStyles((theme: Theme) => {
return {
root: {
marginRight: (props: StyleProps) => theme.spacing(props.marginRight),
marginLeft: (props: StyleProps) => theme.spacing(props.marginLeft),
},
weightBold: {
fontWeight: theme.typography.fontWeightBold,
},
weightSemiBold: {
fontWeight: theme.typography.fontWeightMedium,
},
weightRegular: {
fontWeight: theme.typography.fontWeightRegular,
},
colorWhite: {
color: theme.palette.background.default,
},
underlinedText: {
textDecoration: 'underline',
},
notUnderlinedText: {
textDecoration: 'none',
},
};
});
export default useStyles;