Select Material UI Tag 使用 Yup 和 formik 不顯示錯誤

Question

當沒有選擇任何內容時，它應該打印錯誤，但是，通過檢查元素我可以看到錯誤 label 但沒有出現。 另一個問題是label“國家”沒有出現。 這只發生在 MUI 中的 select 標記和 TextField 下面的“Zip”標記中是可以的。

    <Select
              labelId="demo-simple-select-label"
              required
              fullWidth
              label="Country" 
              name="country"
              id="demo-simple-select"
              value={formik.values.country}
              onChange={formik.handleChange}
              error={
                formik.touched.country && Boolean(formik.errors.country)
              }
              helperText={formik.touched.country && formik.errors.country}
            >
              <MenuItem value={"DE"}>Germany</MenuItem>
              <MenuItem value={"FR"}>France</MenuItem>
            </Select>

Answer 1

我設法找到了答案：試試這個：

import { FormHelperText } from "@mui/material";

  <FormControl>
      <Select
        labelId="demo-simple-select-label"
        required
        fullWidth
        label="Country" 
        name="country"
        id="demo-simple-select"
        value={formik.values.country}
        onChange={formik.handleChange}
        error={
           Boolean(formik.touched.country && formik.errors.country)
        }
      >
         <MenuItem value={"DE"}>Germany</MenuItem>
         <MenuItem value={"FR"}>France</MenuItem>
      </Select>
      {formik.touched.country && formik.errors.country ? (
         <FormHelperText
            sx={{ color: "#bf3333", marginLeft: "16px !important" }}
         >
            {formik.touched.country && formik.errors.country}
         </FormHelperText>
         ) : null}
  </FormControl>

希望它有所幫助