I want to remove underline from the TextField
This is my code:
import React from "react";
import TextField from "@material-ui/core/es/TextField/TextField";
class SearchBox extends React.Component {
render() {
return (
<div>
<TextField
placeholder={"Search"}
underlineStyle={{display: 'none'}}
/>
</div>
)
}
}
export default SearchBox;
This code doesn't remove the underline and I'm getting this error message in console:
Warning: React does not recognize the `underlineStyle` prop on a DOM element. If you intentionally want it to appear in the DOM as a custom attribute, spell it as lowercase `underlinestyle` instead. If you accidentally passed it from a parent component, remove it from the DOM element.
in div (created by FormControl)
in FormControl (created by WithStyles(FormControl))
in WithStyles(FormControl) (created by TextField)
in TextField (at SearchBox.js:9)
in div (at SearchBox.js:8)
in SearchBox (at TopBar.js:17)
in div (created by Toolbar)
in Toolbar (created by WithStyles(Toolbar))
in WithStyles(Toolbar) (at TopBar.js:13)
in header (created by Paper)
in Paper (created by WithStyles(Paper))
in WithStyles(Paper) (created by AppBar)
in AppBar (created by WithStyles(AppBar))
in WithStyles(AppBar) (at TopBar.js:12)
in TopBar (at HomePage.js:8)
in HomePage (at App.js:8)
in App (at index.js:7)
How can I remove the underline?
Textfield doesn't have an underlineStyle
prop. You'll need to use classes
.
馃憢 Thanks for using Material-UI!
We use the issue tracker exclusively for bug reports and feature requests, however,
this issue appears to be a support request or question. Please ask on StackOverflow where the
community will do their best to help. There is a "material-ui" tag that you can use to tag your
question.
If you would like to link from here to your question on SO, it will help others find it.
If your issues is confirmed as a bug, you are welcome to reopen the issue using the issue template.
You're not the first person to have this problem:
https://stackoverflow.com/a/50437531/405015
<TextField
id="name"
label="Name"
value={this.state.name}
margin="normal"
InputProps={{disableUnderline: true}}
/>
Most helpful comment
You're not the first person to have this problem:
https://stackoverflow.com/a/50437531/405015