Writing CSS in JS code to remove arrow buttons from TextField

Question

I am building a webpage with React and Material-UI. I have a TextField element and I want to remove the arrow buttons - if I were using CSS I would use the following code:

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

But I want to style the page using CSS in JS where I use export default withStyles(styles)(FormPersonalDetails). How do I do this? `

const styles = theme => ({
    number: {
        // styling code goes here//
    }
});

render() function:

const { classes } = this.props;
return (
    <TextField className={classes.number} />
)

You are using a class?? So just add your css to App.css. – GifCo May 02 '19 at 12:18 — GifCo, May 02 '19 at 12:18

score 8 · Answer 1 · answered May 02 '19 at 15:03

There are a few syntax options. I have included two options below. The first one uses className on TextField and then targets the descendant input element. The second one applies the className directly to the input element via the TextField inputProps property.

The & is used in both to refer to the parent selector (i.e. the element that the class is being applied to).

import React from "react";
import ReactDOM from "react-dom";

import TextField from "@material-ui/core/TextField";
import { withStyles } from "@material-ui/core/styles";

const styles = theme => ({
  number: {
    "& input::-webkit-outer-spin-button, & input::-webkit-inner-spin-button": {
      "-webkit-appearance": "none",
      margin: 0
    }
  },
  input: {
    "&::-webkit-outer-spin-button, &::-webkit-inner-spin-button": {
      "-webkit-appearance": "none",
      margin: 0
    }
  }
});

function App({ classes }) {
  return (
    <div className="App">
      <TextField type="number" className={classes.number} />
      <br />
      <TextField type="number" inputProps={{ className: classes.input }} />
    </div>
  );
}
const StyledApp = withStyles(styles)(App);
const rootElement = document.getElementById("root");
ReactDOM.render(<StyledApp />, rootElement);

Writing CSS in JS code to remove arrow buttons from TextField

1 Answers1