reactjs - How can I delete the arrow textfield number?

Question

How can I delete the arrows of a textField number?

this doesn't work:

const useStyles = makeStyles(theme => ({
    const theme = createMuiTheme({
    MuiInput: {
      root: {
        "&::-webkit-outer-spin-button, &::-webkit-inner-spin-button": {
          "-webkit-appearance": "none",
          display: "none"
        }
      }
    }
    })

by mean this question this should work, but in my case no

Disable webkit's spin buttons on input type="number"?

input[type=number]::-webkit-inner-spin-button,
input[type=number]::-webkit-outer-spin-button {
    -webkit-appearance: none;
    margin: 0;
}

my textfield is

<TextField
       InputProps={{ classes: { input: classes.inputStyle } }}     
       size="small"
       type="number"

but when i've applied my textField grow too much, i want to size be small

question from:https://stackoverflow.com/questions/65930229/how-can-i-delete-the-arrow-textfield-number

Answer 1

CSS approach is right. this style should be applied to the input element and to apply the styles to the input element, target the input class instead of root. And another issue is here you're trying to use makeStyles and createMuiTheme at once which is not right.

To style using createMuiTheme this is the way:

const theme = createMuiTheme({
    overrides: {
        MuiInput: {
            input: {
                "&::-webkit-outer-spin-button, &::-webkit-inner-spin-button": {
                    "-webkit-appearance": "none",
                    display: "none"
                }
            }
        }
    }
});

And then wrap your app within <MuiThemeProvider>.

To do this using makeStyles:

const useStyles = makeStyles((theme) => ({
    inputStyle: {
        "&::-webkit-outer-spin-button, &::-webkit-inner-spin-button": {
            "-webkit-appearance": "none",
            display: "none"
        }
    }
}));

And then target the input class by using InputProps prop.

export default function TextStyle() {
    const classes = useStyles();

    return (
        <div>
            <TextField
                InputProps={{ classes: { input: classes.inputStyle } }}
                type="number"
            />
        </div>
    );
}

Here is the working demo: