Как реализовать глобальную тему в пользовательском интерфейсе React Material? - PullRequest
Новая
       2

Как реализовать глобальную тему в пользовательском интерфейсе React Material?

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

Я хочу изменить конкретный стиль компонента Материал, например, ListItemText. В моем случае я предпочитаю использовать переменную theme, а не одноразовое решение, работая с каждым компонентом материала в приложении.

const theme = createMuiTheme({
    overrides: {
        ListItemText: {
            root: {
                color: 'red'
            }
        }
    }
});



render(
    <MuiThemeProvider theme={theme}>
        <Router history={history}>
            <Root store={store} />
        </Router>
    </MuiThemeProvider>
   ,
    document.getElementById('root')
)

Я пытался переопределить цвет ListItemText, следуя официальному документу (https://material -ui-next.com / customization / themes / # customizing-all-instances-of-a-компонентный тип ), но не работает.

Что-нибудь, что я пропустил?

1 Ответ

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

Как указано в документации здесь :

Если вы используете ключ темы overrides, как описано в документации, вам необходимо используйте следующее имя таблицы стилей: MuiListItemText

Итак, ваш код должен быть 

const theme = createMuiTheme({
    overrides: {
        MuiListItemText: {
            root: {
                color: 'red'
            }
        }
    }
});

исходный код: https://github.com/mui-org/material-ui/blob/303199d39b42a321d28347d8440d69166f872f27/packages/material-ui/src/ListItem/ListItem.js#L208

...