Переключитесь на RTL в TextField: JssProvider не существует в "response-jss / lib / JssProvider", но только в "response-jss / src / JssProvider"

Question

Я пытаюсь переключить LTR на RTL в:

  <TextField
                                id="date"
                                label="EmployeeDate"
                                type="date"
                                onChange={handleDateChangeLanding}
                                InputLabelProps={{
                                    shrink: true,
                                }}
                            />

Из исследования net люди предлагают использовать

import {create} from 'jss';
import rtl from 'jss-rtl';
import JssProvider from 'react-jss/lib/JssProvider';
import {createGenerateClassName, jssPreset} from '@material-ui/core/styles';

Итак, я создал компонент :

import { create } from 'jss';
import rtl from 'jss-rtl';
import JssProvider from 'react-jss/lib/JssProvider';
import { createGenerateClassName, jssPreset } from '@material-ui/core/styles';

// Configure JSS
const jss = create({ plugins: [...jssPreset().plugins, rtl()] });

// Custom Material-UI class name generator.
const generateClassName = createGenerateClassName();

function RTL(props) {
    return (
        <JssProvider jss={jss} generateClassName={generateClassName}>
            {props.children}
        </JssProvider>
    );
}

, но import JssProvider from 'react-jss/lib/JssProvider'; не разрешается, его не существует, только import JssProvider from 'react-jss/src/JssProvider';, и когда я использую вторую строку, я получаю множество обязательных свойств, которые необходимо указать:

>     Element JssProvider doesn't have required attribute DateInputProps 
>     Element JssProvider doesn't have required attribute InputComponent 
>     Element JssProvider doesn't have required attribute onAccept 
>     Element JssProvider doesn't have required attribute onClear 
>     Element JssProvider doesn't have required attribute onDismiss 
>     Element JssProvider doesn't have required attribute onSetToday 
>     Element JssProvider doesn't have required attribute open

Как я могу решить эту проблему? практически невозможно сделать RTL без его использования пользовательского интерфейса материала из того, что я прочитал в документации.

Есть идеи?

Answer 1

Это может звучать глупо, но вы пытались применить правило direction: rtl CSS против него?

.RTL {
  direction: rtl;
}

<TextField className="RTL" />