Написание CSS в коде JS для удаления кнопок со стрелками из TextField

Question

Я создаю веб-страницу с помощью React и Material-UI. У меня есть элемент TextField, и я хочу удалить кнопки со стрелками - если бы я использовал CSS, я бы использовал следующий код:

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

Но я хочу стилизовать страницу с помощью CSS в JS, где я использую export default withStyles(styles)(FormPersonalDetails). Как мне это сделать? `

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

Функция render ():

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

Answer 1

Есть несколько вариантов синтаксиса. Я включил два варианта ниже. Первый использует className на TextField, а затем нацелен на дочерний элемент input. Второй применяет className непосредственно к элементу input через свойство TextField inputProps.

& используется в обоих случаях для ссылки на родительский селектор (то есть элемент, к которому применяется класс).

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);