MUI Select，顶部边框不显示答案

【问题标题】：MUI Select, top border doesn't showMUI Select，顶部边框不显示
【发布时间】：2022-01-04 15:57:57
【问题描述】：

谁能说选择字段这种行为的原因是什么？我是该项目的新开发人员，并假设有人以某种方式对其进行了更改。

          <mui.FormControl style={{ width: '598px' }}>
            <mui.InputLabel id="label">{t('profile.student.transcriptScreen.selectCourse')}</mui.InputLabel>
            <mui.Select labelId="label" value={values.category ?? ''} name="category" onChange={handleChange}>
              <mui.MenuItem value={'MATH'}>Math</mui.MenuItem>
              <mui.MenuItem value={'ENGLISH'}>English</mui.MenuItem>
              <mui.MenuItem value={'SCIENCE'}>Science</mui.MenuItem>
              <mui.MenuItem value={'SOCIAL'}>Social Studies</mui.MenuItem>
              <mui.MenuItem value={'ELECTIVES'}>Electives</mui.MenuItem>
            </mui.Select>
          </mui.FormControl>

【问题讨论】：

可能有很多东西掩盖了它，最好的方法是开发工具并尝试查看该输入字段周围的 HTML 和 CSS 中发生了什么

标签： reactjs typescript material-ui

【解决方案1】：

您可能缺少label 到mui.Select 的参数。我还建议您将 id="label" 和 labelId="label" 更改为特定的内容。它将帮助您和任何其他开发人员澄清它所识别的内容，例如 course-selection-label。

尝试添加label 属性：

<mui.FormControl style={{ width: '598px' }}>
            <mui.InputLabel id="course-selection-label">{t('profile.student.transcriptScreen.selectCourse')}</mui.InputLabel>
            <mui.Select labelId="course-selection-label" value={values.category ?? ''} name="category" onChange={handleChange} label="Course">
              <mui.MenuItem value={'MATH'}>Math</mui.MenuItem>
              <mui.MenuItem value={'ENGLISH'}>English</mui.MenuItem>
              <mui.MenuItem value={'SCIENCE'}>Science</mui.MenuItem>
              <mui.MenuItem value={'SOCIAL'}>Social Studies</mui.MenuItem>
              <mui.MenuItem value={'ELECTIVES'}>Electives</mui.MenuItem>
            </mui.Select>
          </mui.FormControl>

来源：

MUI's Select Component 以及 This specific SO answer

【讨论】：

我在此处发布之前尝试了此选项，但使用“标签”作为 id，并指定了标签属性。通过更改标签 ID，它现在显示正常。谢谢！

【解决方案2】：

                <mui.InputLabel id="course-name-label">
                  {t('common:subjectCourseName', {
                    subject:
                      values.category === 'SOCIAL_STUDIES'
                        ? 'Social Studies'
                        : values.category.toLowerCase().charAt(0).toUpperCase() +
                          values.category.toLowerCase().slice(1),
                  })}
                </mui.InputLabel>
                <mui.OutlinedInput
                  name="name"
                  value={values.name ?? ''}
                  onChange={handleChange}
                  label={t('common:subjectCourseName', {
                    subject:
                      values.category === 'SOCIAL_STUDIES'
                        ? 'Social Studies'
                        : values.category.toLowerCase().charAt(0).toUpperCase() +
                          values.category.toLowerCase().slice(1),
                  })}
                ></mui.OutlinedInput>
              </mui.FormControl>

export const categoryOptions = [
  { id: 'MATH', name: 'Math' },
  { id: 'ENGLISH', name: 'English' },
  { id: 'SCIENCE', name: 'Science' },
  { id: 'SOCIAL_STUDIES', name: 'Social Studies' },
  { id: 'ELECTIVES', name: 'Electives' },
];

【讨论】：