CODEWITHSUNDEEP
cssreactjsmaterial-ui
sybercoda
sybercoda

Reputation: 565

Material-ui show pointer cursor when hovering over TextField

Material-ui/ReactJS newbie question. I'm trying to show a pointer cursor when hovering over a Material-ui TextField but having a difficult time doing so. It makes use of 'cursor: text' by default. I've been able to successfully change the textfield background color on hover but adding "cursor: pointer !important" does no good. I've tried making use of className, class, style (inline), but I'm certain I'm not doing something correctly. Material-ui has a demo illustrating how to change textfield styling on hover and focused at [https://codesandbox.io/s/p7uwn?file=/demo.js][1] where I have also tried changing the cursor to a pointer on hover but still no luck. Any assistance 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>
  );
}

Upvotes: 13

Views: 29375

Answers (3)

Jake Hall
Jake Hall

Reputation: 2102

Using

<TextField sx={{ cursor: 'pointer' }} />

did not work for me, instead, I needed to specify it as

<TextField sx={{ input: { cursor: 'pointer' } }}

which did affect the desired change.

Upvotes: 20

skirdshateskirdy
skirdshateskirdy

Reputation: 41

Or just literally put cursor:pointer into its css, either in-line as <Component style={{cursor: 'pointer'}}> or <Component sx={{cursor: 'pointer'}}> or in its styled component css. This will automatically change your mouse onHover, and the top answer here is way over the top. Just add cursor: 'pointer' to the component's css.

Upvotes: 4

Prathmesh Srivastava
Prathmesh Srivastava

Reputation: 31

Just a quick browser inspection gave the CSS component we need to target. It's

.MuiOutlinedInput-input

Just giving it a

cursor: pointer;

property will solve your problem.

Here is the code:

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-input {
    cursor: pointer;
  }
  .MuiOutlinedInput-root {
    fieldset {
      border-color: red;
    }
    &:hover fieldset {
      border-color: blue;
      cursor: pointer;
    }
    &.Mui-focused fieldset {
      border-color: green;
    }
  }
`;

export default function GlobalClassName() {
  return (
    <NoSsr>
      <StyledTextField label="Deterministic" variant="outlined" id="deterministic-outlined-input" />
    </NoSsr>
  );
}

Upvotes: 3

Related Questions