Material-UI: flip: false не работает должным образом

Question

Я новичок в Material-UI и jss и добавляю их в проект справа налево.

Я установил в соответствии с документами и все вроде работает,Компоненты MUI автоматически переворачиваются.Однако нам все еще нужны некоторые компоненты, чтобы их не переворачивали и нормально работали с ltr.Я пытался работать со свойством flip: false , которое можно увидеть в документации .Это работает для простого примера в документах по обычным div (переворачивает text-align: right to text-align: left).Если я добавлю флип к компоненту MUI, он ничего не сделает.

const style = {
    affected: {
        textAlign: 'right'
    },
    unaffected: {
        textAlign: 'right',
        flip: false
    }
}

Классы, добавленные к компоненту

<div>
    <FormGroup>
        <FormControlLabel 
            control={
                <Switch 
                    color="primary"
                    className={classes.affected}
                />
            }
            label="Affected Switch"
            labelPlacement="start"
        />
    </FormGroup>
</div>

<div>
    <FormGroup>
        <FormControlLabel 
            control={
                <Switch 
                    color="primary"
                    className={classes.unaffected}
                />
            }
            label="Unaffected Switch"
            labelPlacement="start"
        />
    </FormGroup>
</div>

В приведенном выше примере я ожидал, что это сделает двапереключает, где на первом стили на оси x переключаются в ltr.Однако, это только изменяет выравнивание текста, как в примере с документами.Я не уверен, если это должно работать, и это ошибка, или есть ли способ достичь этого.В Интернете я не нашел примеров того, как перевернуть определенные части компонента, а не просто переопределить весь компонент в ltr и отключить jss-rtl.

Заранее благодарим за любую помощь!

Редактировать: Добавлено демо .

Answer 1

Я отправил это как вопрос для Material-UI и получил ответ. Вот демонстрационная версия , где я достиг желаемого эффекта.

const ltrTheme = {
  ...theme,
  direction: 'ltr'
}

function Demo({classes}) {
  return (
    <FormGroup>
        <FormControlLabel
          control={
            <Switch color="primary"/>
          }
          label="RTL Switch"
        />
        <FormControlLabel
          control={
            <MuiThemeProvider theme={ltrTheme}>
              <div dir="ltr">
                <Switch color="primary"/>
              </div>
            </MuiThemeProvider>
          }
          label="LTR Switch"
        />
      </FormGroup>
  );
}

Все, что вам нужно сделать, - это обернуть нужный вам компонент LTR новой темой с направлением: ltr иdiv с dir = 'ltr'.