如何使 react-admin 默认主题 RTL

Question

我需要将下面使用 material-ui 的 react-admin 制作成 RTL，到目前为止没有任何效果，因为每个元素上都有样式覆盖 body 标签上的 dir="rtl"，创建自定义主题，例如：

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

并在管理组件上使用它，例如：

<Admin locale="ar" dataProvider={dataProvider} i18nProvider={i18nProvider} theme={themeWithDirection} layout={layout}>

没用。在自定义布局上使用 StyleProvider 也不起作用：

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 => 
  <StylesProvider jss={jss}>
    <Layout
      {...props}
    />
  </StylesProvider>;

问题是像 TextField 这样的组件使用 text-align: left;，那么我如何才能翻转它们的 css 而不在自定义 css 文件中覆盖它们？

Answer 1

使用 ListGuesser 我没能将网格切换到 RTL，但是，在编写自定义列表组件和 JssProvider 之后它现在可以工作了：

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 => (
  <JssProvider jss={jss}>
    <List {...props}>
      <Datagrid rowClick="edit">
        <TextField source="id" />
        <TextField source="name" />
        <TextField source="username" />
        <EmailField source="email" />
        <TextField source="address.street" />
        <TextField source="phone" />
        <TextField source="website" />
        <TextField source="company.name" />
      </Datagrid>
    </List>
  </JssProvider>
);

如何使 react-admin 默认主题 RTL

How to make react-admin default theme RTL

reactjs

material-ui

react-admin