CODEWITHSUNDEEP
material-ui
Mushtu
Mushtu

Reputation: 488

Material UI RTL

The RTL demo provided in material ui guides seems does not work for components. As they said in the Right-to-left guide internally they are dynamically enabling jss-rtl plugin when direction: 'rtl' is set on the theme but in the demo only the html input is rtl and TextField isn't.

Here's the demo code from https://material-ui-next.com/guides/right-to-left/#demo

import React from 'react';
import { MuiThemeProvider, createMuiTheme } from 'material-ui/styles';
import TextField from 'material-ui/TextField';

const theme = createMuiTheme({
    direction: 'rtl', // Both here and <body dir="rtl">
});

function Direction() {
    return (
        <MuiThemeProvider theme={theme}>
            <div dir="rtl">
                <TextField label="Name" />
                <input type="text" placeholder="Name" />
            </div>
        </MuiThemeProvider>
    );
}

export default Direction;

Upvotes: 4

Views: 2352

Answers (1)

amin khademian
amin khademian

Reputation: 2040

Once you have created a new JSS instance with the plugin, you need to make it available to all components in the component tree. JSS has a JssProvider component for this:

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

Upvotes: 1

Related Questions