我需要使react-admin在RTL中使用material-ui,到目前为止,由于任何元素的样式都覆盖body标签上的dir="rtl"
,因此创建了自定义主题,如:
const theme = {
direction: 'rtl',
isRtl: true
};
const themeWithDirection = createMuiTheme({...defaultTheme, ...theme});
并在Admin组件上使用它,例如:
<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?
答案 0 :(得分: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>
);