MaterialUI中使用styled方法定制Select组件标签的问题

针对你缩短Select高度后标签无法垂直居中的问题，可以通过调整StyledSelect内部输入元素的内边距，以及StyledInputLabel的定位样式来解决，全程使用styled方法，无需引入额外依赖：

步骤1：调整StyledSelect内部元素的垂直对齐 #

修改StyledSelect，调整输入内容的内边距和下拉图标的定位，确保内部内容垂直居中：

import { selectClasses, outlinedInputClasses } from '@mui/material';

const StyledSelect = styled(Select)`
  height: 2rem;
  color: #fff;
  border-color: #fff;

  /* 调整输入框内容的垂直内边距，适配2rem高度 */
  & .${outlinedInputClasses.input} {
    padding: 0.375rem 1rem;
  }

  /* 确保下拉图标垂直居中 */
  & .${selectClasses.icon} {
    color: #fff;
    top: 50%;
    transform: translateY(-50%);
  }

  & .${outlinedInputClasses.notchedOutline} {
    border-color: #fff;
  }
  &:hover .${outlinedInputClasses.notchedOutline} {
    border-color: #fff;
  }

  &.${outlinedInputClasses.focused} .${outlinedInputClasses.notchedOutline} {
    border-color: #fff !important;
  }
`;

步骤2：调整StyledInputLabel的定位样式 #

修改你已有的StyledInputLabel，调整未收缩和收缩状态下的位置，使其与自定义高度的Select对齐：

import { inputLabelClasses } from '@mui/material';

const StyledInputLabel = styled(InputLabel)`
  color: #fff;
  /* 未收缩时，让标签垂直居中于Select */
  top: 50%;
  transform: translateY(-50%);
  /* 添加内边距避免标签与边框重叠 */
  padding: 0 8px;

  &.${inputLabelClasses.shrink} {
    color: #fff;
    /* 收缩后保持标签在顶部居中 */
    top: 0;
    transform: translateY(-50%) scale(0.75);
  }
`;

最终使用示例 #

将修改后的Styled组件替换原组件即可：

<FormControl fullWidth>
  <StyledInputLabel id="primary-ticker-selector">Ticker</StyledInputLabel>
  <StyledSelect
    labelId="primary-ticker-selector"
    id="primary-ticker-selector"
    value={primary_ticker}
    label="Ticker"
    onChange={handlePrimaryTickerChange}
  >
    {tickers_list.map((ticker, index) => (
      <MenuItem value={index} key={index}>{ticker}</MenuItem>
    ))}
  </StyledSelect>
</FormControl>

核心逻辑说明 #

• 输入内容的内边距调整：默认的内边距是适配Material UI默认高度，自定义高度后需要按比例减少内边距，确保文字垂直居中。
• 标签定位修正：通过top:50%和transform: translateY(-50%)让未收缩的标签与Select垂直对齐，收缩状态下调整top值并保持缩放比例，确保标签位置正确。

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