Hey there! I'm new to Material-ui/ReactJS and I have a question. I'm trying to change the cursor to a pointer when hovering over a Material-ui TextField, but it's proving to be quite challenging. The default behavior is 'cursor: text', and even though I've successfully changed the background color on hover, adding "cursor: pointer !important" doesn't seem to work. I've experimented with className, class, inline styles, but I must be missing something. Material-ui provides a demo showcasing how to style textfields on hover and focus at [https://codesandbox.io/s/p7uwn?file=/demo.js][1]. I tried to apply the same logic to change the cursor to a pointer on hover, but no luck so far. Any help or guidance would be greatly appreciated.
import React from 'react';
import styled from 'styled-components';
import { TextField, NoSsr } from '@material-ui/core';
const StyledTextField = styled(TextField)`
label.Mui-focused {
color: green;
}
.MuiOutlinedInput-root {
fieldset {
border-color: red;
}
&:hover fieldset {
border-color: yellow;
cursor: pointer !important;
}
&.Mui-focused fieldset {
border-color: green;
}
}
`;
export default function GlobalClassName() {
return (
<NoSsr>
<StyledTextField label="Deterministic" variant="outlined" id="deterministic-outlined-input" />
</NoSsr>
);
}