我正在使用“styled”方法定制一个select：

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

  & .${selectClasses.icon} {
    color: #fff;
  }

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

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

...

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

字符串
但是，当我这样做的时候，我得到了两个问题：
1.当标签收缩时，它会变回原色，而不是保持白色
1.标签不再垂直居中，因为我降低了Select的高度。
我尝试只用styled方法来解决这些问题，我不想导入@material/styles。我找不到任何关于如何做到这一点的参考。
编辑：我找到了答案1），将写在下面，但对于2这是一个谜。

const StyledInputLabel = styled(InputLabel)`
color: #fff;
&.${inputLabelClasses.shrink} {
    color: #fff;
}
`;

型