React Material UI 开关标签放置

Question

我正在尝试使用 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>
  );

Answer 1

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

无论如何，这是一种方法，即网格组件：

     <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

请注意，您在原始代码片段中结合使用了 Ant Design 和 Material Design 组件。这可能是不明智的。混合 CSS 可能会导致奇怪的意想不到的副作用。在上面的代码示例中，我将 Ant Design Toggle 替换为 Material Design Toggle。

Answer 2

我在 Material UI v5 中使用了 flex 和

Stack

来做到这一点：

<Stack>
  <FormControl>
    <FormGroup>
      <FormControlLabel
        sx={{
          justifyContent: 'space-between',
          display: 'flex',
        }}
        label="Newsletter"
        labelPlacement="start"
        control={
          <Switch
            inputProps={{
              'aria-label': 'Switch newsletter',
            }}
          />
        }
        value="Newsletter"
      />
    </FormGroup>
  </FormControl>
</Stack>

这是结果