[英]MUI Select, top border doesn't show
谁能说 select 字段的这种行为可能是什么原因? 我是该项目的新开发人员,并假设有人以某种方式对其进行了更改。
<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>
<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' },
];
您可能缺少mui.Select
的label
参数。 我还建议您将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>
资料来源:
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.