0

emphasized textHow to control the border color for a MUI TextField?

<DarkTextField
  variant="outlined"
  margin="dense"
  inputRef={input => (this.input = input)}
  onKeyPress={this.onKeyPressed}
  type="text"
  placeholder="Name"
/>

I've tried a few combinations like below:

const styles = {
  border: {
    "&::before": {
      border: "1px solid #90caf9"
    },
    "&:hover:not(.Mui-disabled):before": {
      border: "2px solid #90caf9"
    },
    "&::after": {
      border: "2px solid #90caf9"
    }
  }
};

const DarkTextField = withStyles(styles)(props => {
  const { classes, ...other } = props;

  return <TextField InputProps={{ className: classes.border }} {...other} />;
});

I don't know how to specify the border. Also, I want to control the color of the placeholder text.

yodude
  • 159
  • 3
  • 5
  • 13
  • My answer here should get you started in the right direction: https://stackoverflow.com/questions/54789989/global-outlined-override/54794340#54794340 – Ryan Cogswell Jul 06 '19 at 20:13
  • And here is even better: https://stackoverflow.com/questions/54325908/change-outline-for-outlinedinput-with-react-material-ui/54331012#54331012 – Ryan Cogswell Jul 06 '19 at 20:31
  • Thanks @RyanCogswell. I fixed everything except for the placeholder color. Now I know that I can look up these things in the source. If you know the placeholder off hand, that would be cool. – yodude Jul 06 '19 at 20:48
  • Search for "placeholder" here: https://github.com/mui-org/material-ui/blob/master/packages/material-ui/src/InputBase/InputBase.js – Ryan Cogswell Jul 06 '19 at 20:58

0 Answers0