Switch to RTL in TextField : JssProvider doesn't exist in "react-jss/lib/JssProvider" but only in "react-jss/src/JssProvider"

Viewed 503

I'm trying to switch LTR to RTL in :

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

From researching over the net people suggest to use

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

So I've created the component :

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

but import JssProvider from 'react-jss/lib/JssProvider'; doesn't resolve , it doesn't exist , only import JssProvider from 'react-jss/src/JssProvider'; , and when I use the second line I get a lot of required properties that must be supplied :

>     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

How can I resolve this ? it's practically impossible to do a RTL without it using material UI from what I've read over the documentation.

Any ideas ?

1 Answers

This may sound silly, but have you tried applying a direction: rtl CSS rule against it?

.RTL {
  direction: rtl;
}

<TextField className="RTL" />

Edit awesome-diffie-rhbph

Related