I have the following code:
const useStyles = makeStyles(() => ({
dialog: {
root: {
position: 'absolute'
},
backdrop: {
position: 'absolute'
},
paperScrollPaper: {
overflow: 'visible'
},
paper: {
background: 'none',
boxShadow: 'none',
overflow: 'hidden'
}
},
}))
export const LoadingBackdrop = (props: any) => {
const classes = useStyles()
const backdropProps = {
disableEscapeKeyDown: true,
disableAutoFocus: true,
disableEnforceFocus: true,
disableScrollLock: true,
disablePortal: true,
}
return (
<Dialog
{...backdropProps}
fullWidth
className={classes.dialog.root}
classes={{
paperScrollPaper: classes.dialog.paperScrollPaper,
paper: classes.dialog.paper,
paperFullWidth: classes.dialog.paper
}}
BackdropProps={{
classes: { root: classes.dialog.backdrop }
}}
style={{ position: 'absolute' }}
{...props}
>
<Loading />
</Dialog>
)
}
At the LoadingBackDrop component, I am getting the following error from ts eslint:
Property 'root' does not exist on type 'string'.ts(2339)
The same goes for the other uses of classes.dialog, only changing the name of the property...
How can I annotate or type the makestyles function (or the hook call) to fix this error?
CodePudding user response:
You can't nest styles in the way you're doing it - they need to be one level deep. For example:
const useStyles = makeStyles(() => ({
root: {
position: 'absolute'
},
backdrop: {
position: 'absolute'
},
paperScrollPaper: {
overflow: 'visible'
},
paper: {
background: 'none',
boxShadow: 'none',
overflow: 'hidden'
}
}))
And:
<Dialog
{...backdropProps}
fullWidth
className={classes.root}
...
Their Styles documentation have further examples.