Изменить курсор дочернего элемента

Я использую @material-ui/core: "4.0.1"

Использование компонента TextField и попытка изменить курсор на 'not-allowed'.

Простой код, как показано ниже

<TextField style = {{cursor:'not-allowed'}}
        id = "standard-name"
        label = "Name"
        margin = "normal"
        disabled = {true}
      />

Но поскольку TextField сам имеет другой компонент внутри, отключенный значок курсора появляется только в верхней части пользовательского интерфейса (а не поверх фактической текстовой области), как показано ниже.

Можно увидеть два div и один элемент управления вводом в TextField

Пытался использовать гламур, чтобы перезаписать класс, как показано ниже, но не повезло

const styles = glamor.css({
  cursor:'not-allowed'
})

function MyStyledDiv({ ...rest}) {
  return (
    <div
      className = {`${styles} ${'MuiInputBase-input'}`}
      {...rest}
    />
  )
}

function App() {
  return (
    <div className = "App">
      <p>Testing</p>
      <MyStyledDiv>
      <TextField style = {{cursor:'not-allowed'}}
        id = "standard-name"
        label = "Name"
        margin = "normal"
        disabled = {true}
      />
      </MyStyledDiv>
    </div>
  );
}

В любом случае я могу достичь этого