如何修改Material UI中FormControl包裹的Select组件下划线颜色

Got it! Since you're happy with your existing FormControl + native Select setup and just need to tweak the underline color, we can adapt the styling logic you already use for TextField directly here—no need to refactor to a different component.

Step 1: Update Your Styles Object #

First, add a dedicated class for the Select's underline (you can reuse the exact pseudo-element styles from your TextField setup):

const styles = theme => ({
  // Reuse your existing label styles
  cssLabel: {
    color: themeStyle.textFieldUnderLineColor,
    "&.Mui-focused": {
      color: themeStyle.tabIndicatorProps,
    }
  },
  // Add this class for the Select underline
  selectUnderline: {
    '&:before': {
      borderBottomColor: themeStyle.textFieldUnderLineColor,
    },
    '&:after': {
      borderBottomColor: themeStyle.tabIndicatorProps,
    },
    '&:hover:before': {
      borderBottomColor: `${themeStyle.appBarRDbgk} !important`,
    },
  },
  // Keep your other existing styles (cssFocused, outlinedInput, etc.) if needed
})

Step 2: Apply the Style to Your Native Select #

Modify your existing JSX to pass the new class to the Select's inputProps (this targets the underlying native input element that controls the underline):

<FormControl fullWidth>
  <InputLabel className={classes.cssLabel}>نوع فرم نامه</InputLabel>
  <Select
    TabIndicatorProps={{style: {backgroundColor: themeStyle.placeHolderTextColor}}}
    native
    autoFocus
    id="letILetTvCodeInt"
    onChange={this.handleChange}
    // Add this line to apply the custom underline style
    inputProps={{ className: classes.selectUnderline }}
  >
    {Tools.GetSelectOptions(this.state.LetType, 'LetTVCodeInt', 'LetTNameStr')}
  </Select>
</FormControl>

Why This Works #

Since you're using the native prop on Select, Material-UI renders a standard HTML <select> element. The underline styling is controlled by pseudo-elements on this native input, so passing our custom class via inputProps lets us override MUI's default underline styles exactly like you did for TextField.

This keeps your existing code structure intact while achieving the exact underline color behavior you want.

内容的提问来源于stack exchange，提问作者milad