Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

How to change the border color of MUI TextField

I can't seem to figure out how to change the outline color of an outlined variant TextField

I looked around GitHub issues and people seem to be pointing towards using the TextField "InputProps" Property but this seems to do nothing.

This is the field

Here is my code in its current state

import React from 'react'; import { withStyles } from '@material-ui/core/styles'; import TextField from '@material-ui/core/TextField'; import PropTypes from 'prop-types';  const styles = theme => ({   field: {     marginLeft: theme.spacing.unit,     marginRight: theme.spacing.unit,     height: '30px !important'   }, });  class _Field extends React.Component {       render() {           const { classes, fieldProps } = this.props;              return (                 <TextField                 {...fieldProps}                 label={this.props.label || "<Un-labeled>"}                 InputLabelProps={{ shrink: true }} // stop from animating.                 inputProps={{ className: classes.fieldInput }}                 className={classes.field}                 margin="dense"                variant="outlined"             />         );     } }  _Field.propTypes = {     label: PropTypes.string,     fieldProps: PropTypes.object,     classes: PropTypes.object.isRequired }  export default withStyles(styles)(_Field); 
like image 582
kinger6621 Avatar asked Oct 21 '18 00:10

kinger6621


2 Answers

https://codesandbox.io/s/6rx8p

                      <CssTextField                               label="Username"                         className="username"                        name="username"                        onChange={this.onChange}                        type="text"                        autoComplete="current-password"                        margin="normal"                        inputProps={{ style: { fontFamily: 'nunito', color: 'white'}}}                      /> 

//declare the const and add the material UI style

const CssTextField = withStyles({   root: {     '& label.Mui-focused': {       color: 'white',     },     '& .MuiInput-underline:after': {       borderBottomColor: 'yellow',     },     '& .MuiOutlinedInput-root': {       '& fieldset': {         borderColor: 'white',       },       '&:hover fieldset': {         borderColor: 'white',       },       '&.Mui-focused fieldset': {         borderColor: 'yellow',       },     },   }, })(TextField); 
like image 34
Jojo Joseph Avatar answered Sep 20 '22 13:09

Jojo Joseph


Take a look at this, I made a quick demo:

https://stackblitz.com/edit/material-ui-custom-outline-color

It changes the default border color and the label color of the Material-UI TextField but keeps the primary color when focused.

Also, take a look at this link, it gave me the "idea":

https://github.com/mui-org/material-ui/issues/13347

If you want to change the color when focused look at these examples from the documentation:

https://mui.com/components/text-fields/#customization

like image 107
Peter Catalin Avatar answered Sep 22 '22 13:09

Peter Catalin