Могут ли переключатели иметь несколько меток?

Question

Мне нужно включить / выключить мою программу.Изучив документацию, я не смог найти способ добавить несколько меток к одному переключателю

Мне нужно что-то подобное в материале-ui:

Answer 1

Вы можете использовать компонент Grid из material-ui для создания пользовательского переключателя.Иметь оба текста до и после вашего переключения в качестве элементов сетки.Это выглядело бы примерно так:

<Grid component="label" container alignItems="center" spacing={1}>
      <Grid item>Off</Grid>
      <Grid item>
        <Switch
          checked={state.checked} // relevant state for your case
          onChange={handleChange} // relevant method to handle your change
          value="checked" // some value you need
        />
      </Grid>
      <Grid item>On</Grid>
</Grid>

Вот ссылка на песочницу для вашего случая.