如何使react-admin默认主题RTL
如何使react-admin默认主题RTL
提问于 2019-06-19 20:30:27
我需要使react-admin，其中使用材料下的ui到RTL，到目前为止没有任何工作，因为有每个元素上的样式覆盖主体标签上的dir="rtl"，创建一个自定义主题，如：
const theme = {
direction: 'rtl',
isRtl: true
};
const themeWithDirection = createMuiTheme({...defaultTheme, ...theme});并在管理组件上使用它，如下所示：
<Admin locale="ar" dataProvider={dataProvider} i18nProvider={i18nProvider} theme={themeWithDirection} layout={layout}>没有起作用。此外，自定义布局上的usign 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文件中覆盖它们呢？
回答 1
Stack Overflow用户
回答已采纳
发布于 2019-06-19 20:36:39
然而，在编写了一个自定义的list组件和JssProvider之后，我没有机会使用ListGuesser将网格切换到RTL，现在它可以工作了：
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>
);页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/56667689
复制相关文章
相似问题
腾讯云开发者
