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

在文本字段中单击时，边框逐渐消失（变成白色）。我希望边界无论如何都不会消失。我尝试通过material-ui示例查看一个概述的文本字段，并遇到了“ Bare”文本框，该文本框具有固定的边框，但在我的情况下无法使其正常工作。我想我必须深入研究包装器组件并在某处设置边框的样式？我不确定。

Answer 1

从我的深入解答https://github.com/mui-org/material-ui/pull/13105#issuecomment-427459843中可以为notchedOutline类添加样式。

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

演示：https://codesandbox.io/s/ppmxn3rp9x

这目前有一些限制，我已在链接的注释中列出。

Answer 2

这对我有用。

在您的样式文件中有此

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

然后在我的TextField中，我将在InputProp属性中实现abobe

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

如何设置MUI轮廓的TextField的边框样式？

2 个答案: