MUI Select, top border doesn't show-CodePudding

Could anyone please say what can be the reason for such behaviour of select field? I am a new developer on the project, and assume that someone has somehow changed it.

          <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>

CodePudding user response：

You're probably missing the label parameter to mui.Select. I also suggest you change id="label" and labelId="label" to something specific. It will help you and any other developer clarify what it is identifying, something like course-selection-label.

Try adding the label property:

<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>

Sources:

MUI's Select Component as well as This specific SO answer