gpt4 book ai didi

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

转载 作者:行者123 更新时间:2023-11-28 19:27:07 26 4
gpt4 key购买 nike

我正在使用 React 和 Material-UI 构建网页。我有一个 TextField 元素,我想删除箭头按钮 - 如果我使用 CSS,我将使用以下代码:

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

但我想在我使用 export default withStyles(styles)(FormPersonalDetails) 的 JS 中使用 CSS 来设置页面样式。我该怎么做呢?`

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

渲染()函数:

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

最佳答案

有几个语法选项。我在下面包含了两个选项。第一个在 TextField 上使用 className,然后以后代 input 元素为目标。第二个通过 TextField 将 className 直接应用于 input 元素 inputProps属性(property)。

& 在两者中都用于引用 parent selector (即应用该类的元素)。

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

Edit TextField remove spin buttons

关于javascript - 在 JS 代码中编写 CSS 以从 TextField 中删除箭头按钮,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/55952086/

26 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com