javascript - How to style the border of a MUI outlined TextField? - Stack Overflow

admin管理员组

文章数量:1310193

Here is my current set up for a TextField ponent:

const styles = {
    resize: {
        fontSize: '50px',
    }
}

const textField = (props) => {

    const { classes } = props;

    return (
        <TextField
            value={props.value}
            placeholder={'$'}
            variant={'outlined'}
            onChange={props.onChange}
            autoFocus
            InputProps={{
                classes: {
                    input: classes.resize
                }
            }}
        />
    );
};

export default withStyles(styles)(textField);

When clicking in the text field the border fades away (to a white color). I want the border to stay no matter what and not fade. I tried looking through the material-ui examples for an outlined textfield and came across the "Bare" one which had a fixed border but cannot get it to work in my case. I think I have to dig down through the wrapper ponents and set the style for the border somewhere? Im not sure.

Here is my current set up for a TextField ponent:

const styles = {
    resize: {
        fontSize: '50px',
    }
}

const textField = (props) => {

    const { classes } = props;

    return (
        <TextField
            value={props.value}
            placeholder={'$'}
            variant={'outlined'}
            onChange={props.onChange}
            autoFocus
            InputProps={{
                classes: {
                    input: classes.resize
                }
            }}
        />
    );
};

export default withStyles(styles)(textField);

When clicking in the text field the border fades away (to a white color). I want the border to stay no matter what and not fade. I tried looking through the material-ui examples for an outlined textfield and came across the "Bare" one which had a fixed border but cannot get it to work in my case. I think I have to dig down through the wrapper ponents and set the style for the border somewhere? Im not sure.

• javascript
• reactjs
• material-ui

Share Improve this question Follow asked Oct 15, 2018 at 23:42 NumnumberryNumnumberry 39511 gold badge44 silver badges1717 bronze badges

Add a ment  | 

2 Answers 2

Sorted by: Reset to default 4

Taking from my indepth answer https://github./mui-org/material-ui/pull/13105#issuement-427459843 you could add styles to the notchedOutline class.

<TextField classes={{ notchedOutline: myClassnameWithCustomStyles }} />

Demo: https://codesandbox.io/s/ppmxn3rp9x

This currently has some limitation which I laid out in the linked ment.

This is what worked for me.

In your style file have this

underline: {
  "&:after": {
    borderBottomColor: "rgb(70, 197, 29)",
    borderWidth: "1px"
  }
}

And then in my TextField I will implement the abobe within the InputProp property

          <TextField
              id="standard-number"
              label="Number"
              required
              autoFocus
              classes={{
                root: classes.space,
              }}
              value={some_value}
              onChange={e =>
                this.setState({
                  some_value: e.target.value
                })
              }
              error={some_value === "" || some_value < 0}
              helperText={
                qty_in_mts === ""
                  ? "Please enter Quantity (in M. Tons)"
                  : " "
              }
              label="Quantity (M. Tons)"
              type="number"
              fullWidth
              InputProps={{
                classes: {
                  underline: classes.underline
                }
              }}
            />

本文标签： javascriptHow to style the border of a MUI outlined TextFieldStack Overflow