
### Goal

We want to see the pointer cursor when hovering over a Material UI component.

### Examples

```typescript
<Typography sx={{ "&:hover": { cursor: "pointer" } }}>
  This is some text
</Typography>
```

```typescript
<Box p={2} border="1px solid #ccc" sx={{ "&:hover": { cursor: "pointer" } }}>
  <Typography>This is a box</Typography>
</Box>
```

### Notes

Make sure not to have a space between the `&` and `:hover`. That will only select hovered child components.

If you're trying to add cursor: pointer to an Icon, use an IconButton


<h3>Goal</h3>
<p>We want to see the pointer cursor when hovering over a Material UI component.</p>
<h3>Examples</h3>
<pre><code>&#x3C;Typography sx={{ "&#x26;:hover": { cursor: "pointer" } }}>
  This is some text
&#x3C;/Typography>
</code></pre>
<pre><code>&#x3C;Box p={2} border="1px solid #ccc" sx={{ "&#x26;:hover": { cursor: "pointer" } }}>
  &#x3C;Typography>This is a box&#x3C;/Typography>
&#x3C;/Box>
</code></pre>
<h3>Notes</h3>
<p>Make sure not to have a space between the <code>&#x26;</code> and <code>:hover</code>. That will only select hovered child components.</p>
<p>If you're trying to add cursor: pointer to an Icon, use an IconButton</p>
