I am experiencing a strange issue. When I set the cursor attribute value directly as a string like
return (
<Grid item>
<Card
sx={{
padding: "1rem",
":hover": {
cursor: "pointer"
}
}}
/>
</Grid>
)
it works as expected, however, if I create a constant with the value of "pointer" and pass it to the cursor attribute, it does not work.
const cursorPointer = "pointer";
return (
<Grid item>
<Card
sx={{
padding: "1rem",
":hover": {
cursor: { cursorPointer }
}
}}
/>
</Grid>
)
I am using Material UI, Next.js, and TypeScript. Thank you.