Как стилизовать границы многоязыкового интерфейса пользователя TextField?

Question

Вот мои текущие настройки для компонента TextField:

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);

При щелчке в текстовом поле граница исчезает (до белого цвета).Я хочу, чтобы граница оставалась ни на что не исчезала.Я попытался просмотреть примеры материала-интерфейса для обрисованного в общих чертах текстового поля и наткнулся на «Голое», которое имело фиксированную границу, но не могло заставить его работать в моем случае.Я думаю, что я должен копаться в компонентах оболочки и установить стиль для границы где-нибудь?Я не уверен.

Answer 1

Это то, что сработало для меня.

В вашем файле стиля есть это

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

А затем в моем TextField я буду реализовывать абоб в пределах свойства InputProp

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

Answer 2

Исходя из моего глубокого ответа https://github.com/mui-org/material-ui/pull/13105#issuecomment-427459843 вы можете добавить стили к классу notchedOutline.

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

Демо: https://codesandbox.io/s/ppmxn3rp9x

В настоящее время это имеет некоторые ограничениякоторый я выложил в связанном комментарии.