如何仅在 MUI React 中首次单击后调用无效的红色边框样式？

Question

我一直在使用 MUI 文本字段，并且希望该字段仅在第一次单击后且输入为空白时才具有红色轮廓。所以该字段是正常的，但是一旦用户单击该字段，如果他删除或将该字段留空，轮廓应变为红色。下面的样式立即在渲染时创建红色边框。我应该改变什么？

与此相关的几个问题：

1. 目前，我将该字段称为必填，以便检查错误，有没有办法删除使用 required 关键字时的星号？

2. 通过添加backgroundColor变量，看起来z-index高于字段中的文本，导致整个字段被着色并且文本被隐藏在后面。我可以做什么来修复它？

设置backgroundColor时：

文本字段样式：

const ValidationTextField = styled(TextFieldStyled)({
  '& input:valid + fieldset': {
    borderColor: 'green',
    borderWidth: 2,
    // backgroundColor: 'green'; // This covers the whole input so that the text input is now blocked.
  },
  '& input:invalid + fieldset': {
    borderColor: 'red',
    borderWidth: 2,
  }
});

这是使用文本字段的类：

class CompanyField extends React.Component {

  render() {
    return (
      <ValidationTextField
        id = "outlined-basic" 
        label = "Company" 
        variant = "outlined"
        fullWidth
        required

        value={this.props.value}
        onChange={this.props.handleChange}
      />
    );
  }
}

谢谢！

Answer 1

1. 访问Textfield的InputLabelProps，并设置为false。仍需要输入，但标签被视为不需要。 （如下所示）

2. 不要针对输入背景，只需设置Textfield的背景色（如下所示）

以实现您的红色边框样式，创建一个状态变量以跟踪是否已单击该组件，然后使用Textfields onfocus onfocus prop，使用将状态更改为“已单击”的函数。使用该变量将样式应用于TextField：

https：/ /codesandbox.io/s/cool-varahamihira-mio1qw?file=/src/app.js

import { TextField, Box, Button } from "@mui/material";
import { useState } from "react";
import "./styles.css";

const ValidationTextField = ({ ...args }) => {
  const [firstClick, setFirstClick] = useState(true);

  return (
    <TextField
      {...args}
      onFocus={() => setFirstClick(false)}
      InputLabelProps={{
        required: false
      }}
      sx={{
        backgroundColor: "green",
        "& input:valid + fieldset": {
          borderColor: "green",
          borderWidth: 2
        },
        "& input:invalid + fieldset": {
          borderColor: firstClick ? "green" : "red",
          borderWidth: 2
        }
      }}
    />
  );
};

export default function App() {
  return (
    <div className="App">
      <Box component="form">
        <ValidationTextField
          id="outlined-basic"
          label="Company"
          variant="outlined"
          fullWidth
          required
        />
        <Button type="submit">Submit</Button>
      </Box>
    </div>
  );
}

Answer 2

很抱歉在此处发布编辑，但是Stackoverflow不允许我编辑以前的帖子。但是，COOT3的方法确实适合我的问题，但是，我发现在MUI的自动完整中使用它很难：

建议的样式更改：

const ValidationDropDown = ({ ...args }) => {
    const [firstClick, setFirstClick] = useState(true);
  
    return (
      <DropDownStyled //Autocomplete Item
        {...args}
        onFocus={() => setFirstClick(false)}
        InputLabelProps={{
          required: false
        }}
        sx={{
          backgroundColor: "green",
          "& input:valid + fieldset": {
            borderColor: "green",
            borderWidth: 2
          },
          "& input:invalid + fieldset": {
            borderColor: firstClick ? "" : "red",
            borderWidth: 2
          }
        }}
      />
    );
  };

类：

class JobTypeField extends React.Component {

    render() {
        return (
            <ValidationDropDown
                id="combo-box-demo"
                options={jobType}
                required

                onChange={this.props.handleChange}
                renderInput={(params) => <TextField {...params} required label="Job Type" />}
            />
        );
    }
}

自动完整的背景确实改变了颜色，但状态没有似乎是应用的，因此边界缺乏色彩变化。