Material-ui: underlineStyle not working on TextField

Created on 20 May 2018  路  3Comments  路  Source: mui-org/material-ui

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?

support

Most helpful comment

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}}
/>

All 3 comments

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}}
/>
Was this page helpful?
0 / 5 - 0 ratings

Related issues

mb-copart picture mb-copart  路  3Comments

anthony-dandrea picture anthony-dandrea  路  3Comments

revskill10 picture revskill10  路  3Comments

chris-hinds picture chris-hinds  路  3Comments

rbozan picture rbozan  路  3Comments