reactjs - 自定义（withStyle）受控材料-ui TextField 的奇怪行为

Question

我正在尝试在表单中使用 Material-ui TextField。此文本字段以仅授权十六进制字符的方式进行控制。

<form style={{ flex: '1' }} onSubmit={this.handleSubmit} noValidate autoComplete="off">
        <TextField margin='normal' label="Base address" size="small" variant="outlined" fullWidth
          InputProps={{ startAdornment: <InputAdornment position="start">0x</InputAdornment> }}
          helperText="Please enter 8 hexadecimal digits"
          value={this.state.address}
          onChange={event => {
            if (/^[0-9A-Fa-f]*$/.test(event.target.value))
              this.setState({ address: event.target.value })
            else this.setState({ address: this.state.address })
          }}
        />
</form>

这按预期工作，没问题。但是当我用我的自定义的 CssTextField 替换 TextField

const CssTextField = withStyles({
      root: {
        '& label': {
          color: 'var(--input-foreground)',
          '&.Mui-focused': {
            color: 'var(--inputValidation-infoBorder)',
          },
        },
        '& input': {
          color: 'var(--input-foreground)',
        },
        '& input:invalid + fieldset': {
          borderColor: 'var(--inputValidation-errorBorder)',
        },

        '& .MuiFormHelperText-contained': {
          color: 'var(--input-foreground)',
        },
        '& .MuiOutlinedInput-notchedOutline': {
          borderColor: 'var(--input-foreground)',
        },

        '& .MuiOutlinedInput-root': {
          '&:hover fieldset': {
            borderColor: 'var(--thinput-foreground)',
          },
          '& fieldset': {
            borderColor: 'var(--input-foreground)',
          },
          '&.Mui-focused fieldset': {
            borderColor: 'var(--inputValidation-infoBorder)',
          },
          '& p.MuiTypography-colorTextSecondary': {
            color: 'var(--input-foreground)',
          },
        },
      },
    })(TextField);

应用了新样式，但与 TextField 相比，CssTextField 的行为（不仅是样式）发生了变化。事实上，一旦我输入一个简单的字符，焦点就会从 CssTextField 中丢失，我需要在该字段中再次单击以输入一个新字符......这当然不会发生在“正常”TextField 中。

顺便说一句，当我在使用 CssTextField 时删除控件（删除道具值和 onChange）时，不会发生这种奇怪的行为。

所以我处于可以控制输入但不能控制样式的情况，或者我可以设置 TextField 的样式但不能控制输入！

附加信息：即使样式为空（在 withStyles 中仅设置 root:{}），也会出现问题。

任何建议都非常受欢迎。谢谢

标签： reactjsuser-interfacematerial-ui