How to make react-admin default theme RTL

Question

I need to make react-admin which uses material-ui underneath into RTL, so far nothing works because there are styles on each element overriding dir="rtl" on body tag, creating a custom theme like:

const theme = {
  direction: 'rtl',
  isRtl: true
};
const themeWithDirection = createMuiTheme({...defaultTheme, ...theme});

and using it on Admin component like:

did not work. also usign StyleProvider on custom layout did not work:

import React from 'react';
import { Layout } from 'react-admin';

import { create } from 'jss';
import rtl from 'jss-rtl';
import {  jssPreset } from '@material-ui/core/styles';
import { StylesProvider } from '@material-ui/core/styles';

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

const MyLayout = props => 
  
    
  ;

The problem is that components like TextField use text-align: left;, so how can I flip their css without overriding them in a custom css file?

user_887277 · Answer

Using the ListGuesser I had no luck switching the grid to RTL, however, after writing a custom list component and JssProvider it now works:

import React from 'react';
import { List, Datagrid, TextField, EmailField } from 'react-admin';

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


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

export const UserList = props => (
  
    
      
        
        
        
        
        
        
        
        
      
    
  
);

How to make react-admin default theme RTL

1 Answers