Javascript 在JS代码中编写CSS以从TextField中删除箭头按钮

我正在建立一个网页与反应和材料的用户界面。我有一个TextField元素，我想删除箭头按钮-如果我使用CSS，我将使用以下代码：

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

但是我想在JS中使用CSS设置页面样式，在这里我使用

导出默认样式（样式）（FormPersonalDetails）

。我该怎么做？ `

render（）函数：

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

const{classes}=this.props；
返回(
)

有几个语法选项。我在下面列出了两个选项。第一个使用

TextField

上的

className

，然后将目标指向后代

input

元素。第二个类通过

TextField

属性将类名直接应用于

input

元素

和

在这两种语言中都用于表示（即类应用到的元素）

从“React”导入React；
从“react dom”导入react dom；
从“@material ui/core/TextField”导入TextField；
从“@material ui/core/styles”导入{withStyles}”；
常量样式=主题=>({
编号：{
“&输入：：-webkit外部旋转按钮，&输入：：-webkit内部旋转按钮：”{
“-webkit外观”：“无”，
保证金：0
}
},
输入：{
“&:：-webkit外部旋转按钮，&:：-webkit内部旋转按钮”：{
“-webkit外观”：“无”，
保证金：0
}
}
});
函数App（{classes}）{
返回(


);
}
const StyledApp=带有样式（样式）（应用程序）；
const rootElement=document.getElementById（“根”）；
render（，rootElement）；

---

您正在使用一个类？？所以只需将您的css添加到App.css。

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

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