Материал пользовательского интерфейса RTL - PullRequest
Новая
       8

Материал пользовательского интерфейса RTL

0 голосов
/ 11 мая 2018

Демонстрация RTL, представленная в руководствах по материалам, кажется, не работает для компонентов. Как сказано в руководстве Справа налево , они динамически включают плагин jss-rtl, когда в теме задано направление: 'rtl', но в демоверсии только ввод html - это rtl, а TextField - нет. «т.

Вот демонстрационный код от https://material -ui-next.com / guides / справа налево / # demo 

import React from 'react';
import { MuiThemeProvider, createMuiTheme } from 'material-ui/styles';
import TextField from 'material-ui/TextField';

const theme = createMuiTheme({
    direction: 'rtl', // Both here and <body dir="rtl">
});

function Direction() {
    return (
        <MuiThemeProvider theme={theme}>
            <div dir="rtl">
                <TextField label="Name" />
                <input type="text" placeholder="Name" />
            </div>
        </MuiThemeProvider>
    );
}

export default Direction;

1 Ответ

0 голосов
/ 16 июля 2018

Как только вы создали новый экземпляр JSS с помощью плагина, вам нужно сделать его доступным для всех компонентов в дереве компонентов.Для этого в JSS есть JssProvider компонент: 

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}>
      {props.children}
    </JssProvider>
  );
}
Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.

Нет похожих вопросов

...