Material-ui: proxyConsole.js:56 Warning: Unknown prop `underlineStyle`

[SidduMirji]

• [x] I have searched the issues of this repository and believe that this is not a duplicate.

Expected Behavior

TextField Underline should be hidden when I mention underlineStyle={{display: 'none'}}

Current Behavior

Nothing changes for the TextField UnderLine

Steps to Reproduce (for bugs)

 <TextField
              placeholder="Search here"
              inputClassName={classes.input}
              className={classes.searchField}
              margin="normal"
              underlineStyle={{display: 'none'}} 
            />

Your Environment

| Tech | Version |
|--------------|---------|
| Material-UI | 1.0.0-beta.7 |
| React | 15.6.1 |
| browser | chrome |

[oliviertassinari]

The v1-beta branch do not support this feature.

[SidduMirji]

will this support available once the stable version released?

[oliviertassinari]

@SidduMirji No. Use the class name API instead.

[SidduMirji]

Okay thank you.

[hamzahayat]

@oliviertassinari I've searched through the API docs but I believe that there is no way currently to change the color of the underline within an Input element using the className API.

[ha7ilm]

@oliviertassinari How to do that exactly? Can you point me to an example?
I've spent a lot of time to restyle a <Select> but only managed to change the text color.
Even tried MuiThemeProvider and checked the implementation of Select.

[oliviertassinari]

@ha7ilm We have a customization demo for the text field: https://material-ui-next.com/demos/text-fields/#customized-inputs. Here, it's going to change the underline color:

import React from 'react';
import PropTypes from 'prop-types';
import { withStyles } from 'material-ui/styles';
import Input, { InputLabel } from 'material-ui/Input';
import TextField from 'material-ui/TextField';
import { FormControl } from 'material-ui/Form';
import purple from 'material-ui/colors/purple';

const styles = theme => ({
  underline: {
    '&:after': {
      backgroundColor: purple[500],
    },
  },
});

function CustomizedInputs(props) {
  const { classes } = props;

  return (
      <TextField
        defaultValue="react-bootstrap"
        label="Bootstrap"
        id="bootstrap-input"
        InputProps={{
          classes: {
            underline: classes.underline,
          },
        }}
      />
  );
}

CustomizedInputs.propTypes = {
  classes: PropTypes.object.isRequired,
};

export default withStyles(styles)(CustomizedInputs);

[ha7ilm]

@oliviertassinari Thank you very much!