React Material UI 开关标签放置答案

【问题标题】：React Material UI Switch Label PlacementReact Material UI 开关标签放置
【发布时间】：2021-04-21 15:29:53
【问题描述】：

我正在尝试使用 Material UI Switch 组件（找到 here）创建自定义开关。我在开关的右侧放置了一个标签，但是位置离开关太近了。我想知道是否有办法调整开关和标签之间的间距？谢谢你。这是我的代码：

return (
    <FormGroup>
    <Typography component="div">
      <Grid component="label" container alignItems="center" spacing={1}>
      <Grid item></Grid>
        <Grid item>
        <FormControlLabel
          control={<AntSwitch checked={state.checkedC} onChange={handleChange} name="checkedC"/>}
          label= {state.checkedC? 'On' : 'Off'}
          labelPlacement="end"
        />
        </Grid>
      </Grid>
    </Typography>
  </FormGroup>
  );

【问题讨论】：

标签： reactjs material-ui label uiswitch

【解决方案1】：

有很多不同的方法可以解决这个问题。提及你尝试过的东西通常是一种很好的礼仪。 ;)

无论如何，这里有一种方法，Grid 组件：

     <FormGroup>
        <Typography component="div">
          <Grid
            component="label"
            container
            alignItems="center"
            alignContent="space-between"
            xs={12}
            spacing={3}
          >
            <Grid item>
              <Switch
                checked={state.checkedB}
                onChange={handleChange}
                name="checkedB"
              />
            </Grid>
            <Grid item>{state.checkedA ? "On" : "Off"}</Grid>
          </Grid>
        </Typography>
      </FormGroup>

这是另一种使用普通旧 CSS 的方法。

    <FormGroup>
        <Typography component="div">
         
              <Switch
                checked={state.checkedB}
                onChange={handleChange}
                name="checkedB"
              />
            
            <span style={{paddingLeft:'2em'}}>{state.checkedA ? "On" : "Off"}</span>
        </Typography>
      </FormGroup>

您可以在此处查看两者的实际效果：https://codesandbox.io/s/grid-spacing-7w1kn

请注意，您在原始代码 sn-p 中使用了 Ant Design 和 Material Design 组件的组合。这可能是不明智的。混合 CSS 会导致奇怪的意外副作用。在上面的代码示例中，我将 Ant Design Toggle 换成了 Material Design。

【讨论】：