[英]Remove the border from TexfField
I started using @Mui for React and I used it to create the form but after I focused TextField I see the border linke on the below screen:我开始为 React 使用 @Mui 并用它来创建表单,但是在我关注 TextField 之后,我在下面的屏幕上看到了边框链接:
My code look like this:我的代码如下所示:
<FormGroup>
<TextField
label="Description"
name="description"
multiline
rows={5}
fullWidth
value={data.description}
variant="standard"
onChange={onHandleChange}
/>
</FormGroup>
How remove that?怎么去掉?
@Edit I resolved my problem. @Edit 我解决了我的问题。 Border around of this element appears becouse I has styles from Breeze
出现这个元素的边框是因为我有 Breeze 的 styles
You can change the styling (remove the underline) of TextField when it is focused with makeStyles
using :after
当TextField使用
makeStyles
聚焦时,您可以使用:after
更改其样式(删除下划线)
In your case do the following:在您的情况下,请执行以下操作:
import TextField from "@mui/material/TextField";
import FormGroup from "@mui/material/FormGroup";
import { makeStyles } from "@material-ui/core/styles";
const useStyles = makeStyles({
underline: {
"&&:after": {
borderBottom: "none"
}
}
});
export default function ComboBox() {
const classes = useStyles();
return (
<FormGroup>
<TextField
InputProps={{ classes }}
label="Description"
name="description"
multiline
rows={5}
fullWidth
value={data.description}
variant="standard"
onChange={onHandleChange}
/>
</FormGroup>
);
}
And if you want it with no border at all you can pass InputProps={{ disableUnderline: true }}
to your TextField
如果你想要它完全没有边框,你可以将
InputProps={{ disableUnderline: true }}
传递给你的TextField
Normally this can be done via CSS as well.通常这也可以通过 CSS 来完成。
input {
outline: none
}
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.