CSS Cursor Pointer-CodePudding

I have weird issue. When I pass the value to cursor attribute as usual as string like

return (
  <Grid item>
    <Card 
      sx={{
        padding: "1rem",
        ":hover": {
          cursor: "pointer"
        }
      }}
    />
  </Grid>
)

it works correctly, but if I create constant with value of string pointer and then pass it to the cursor it doesn't work.

const cursorPointer = "pointer";
return (
  <Grid item>
    <Card 
      sx={{
        padding: "1rem",
        ":hover": {
          cursor: { cursorPointer }
        }
      }}
    />
  </Grid>
)

I am working with material ui, nextjs and typescript. Thanks.

CodePudding user response：

The issue is that you aren't passing the value you think you are.

What you have in the second case actually looks like:

{
 ":hover": {
  cursor: { cursorPointer: "pointer" }
 }
}

Instead of

{
 ":hover": {
  cursor: "pointer" 
 }
}

You can use a variable with the following syntax

{
 ":hover": {
  cursor: cursorPointer 
 }
}