Accepted answer

You need jss-rtl to support rtl for css. This library provides its Provider to support rtl in any library.

import React from "react";
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}>

export default RTL;

Then in your main app use this provider.

    <Demo />

Working demo here

Related Query

More Query from same tag