Блог

Я пытаюсь создать пользовательский переключатель, используя компонент переключения пользовательского интерфейса материала (см. Здесь ). Я разместил метку справа от моего переключателя, однако она расположена слишком близко к переключателю. Мне было интересно, есть ли способ отрегулировать расстояние между переключателем и меткой? Спасибо. Вот мой код:

 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>
  );
 

Существует довольно много разных способов решения этой проблемы. Обычно считается хорошим этикетом упомянуть о том, что вы пробовали. 😉

В любом случае, вот один из подходов, компонент 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

Пожалуйста, обратите внимание, что вы используете комбинацию компонентов Ant Design и Material Design в вашем исходном фрагменте кода. Это, вероятно, неразумно. Смешивание CSS может привести к странным непреднамеренным побочным эффектам. В приведенных выше примерах кода я заменил переключатель Ant Design на переключатель Material Design.