如何使Material-UI的Switch开关标签与控件实现垂直对齐

你配置的.switch类中alignItems: "flex-end"是导致标签偏低的核心原因，该属性会让FormControlLabel内部的开关和文本向底部对齐，而非垂直居中。

修复方案 #

直接修改makeStyles中的switch样式即可：

const useStyles = makeStyles((theme) => ({
  root: {
    paddingLeft: theme.spacing(2),
    paddingRight: theme.spacing(1),
    flexDirection: "column",
    display: 'flex'
  },
  container: {
    width: (props) => (props.show ? "inherit" : "0px"),
    height: (props) => (props.show ? "inherit" : "0px")
  },
  switch: {
    alignSelf: "flex-end", // 保持整个开关组件靠右的原有布局
    alignItems: "center", // 实现开关与文本垂直居中对齐
    // 可选微调：消除行高带来的细微偏移
    '& .MuiFormControlLabel-label': {
      lineHeight: 1,
      padding: 0
    }
  },
}))

如果调整后仍有极轻微的位置偏差，可在Switch组件上补充垂直对齐属性：

<Switch checked={show} onChange={handleChangeShow} style={{ verticalAlign: 'middle' }} />

修改后即可实现Switch控件与Hide/Show文本的完美垂直居中对齐，原有功能和布局逻辑不受影响。

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