2016-11-16 3 views
2

Я использую Material-UI в проекте, и я пытаюсь переопределить стиль темы по умолчанию textTransform:"uppercase" и вместо этого заменить его на textTransform:"capitalize".Невозможно переопределить стили темы Material-UI

Консультации по документам на custom styling сообщили мне, что я должен использовать встроенные стили или собственный класс.

Добавление className="capitalize" (имеющее в качестве text-transform объект в классе) или добавление style={{textTransform: "capitalize"}} дает тот же результат. Родительский div передается свойство CSS, но в конечном счете переопределяется дочерним элементом span.

Это intended behavior, или я что-то не так?

ответ

1

Вы можете использовать собственную тему для переопределения textTransform:

const App =() => { 
    const customTheme = { button: { textTransform: 'capitalize' } }; 

    return (
    <MuiThemeProvider muiTheme={getMuiTheme(customTheme) }> 
     <Example /> 
    </MuiThemeProvider> 
) 
}; 

Рабочая jsFiddle: https://jsfiddle.net/88uq8751/7/

+0

Это работало замечательно для моих целей, спасибо. Из любопытства есть ли способ создать изменение на одну кнопку, а не на все кнопки (как это происходит при изменении файла темы)? – rickymetz

+0

Yup. используйте свойство labelStyle: labelStyle = {{textTransform: 'capitalize'}} на RaisedButton или FlatButton –

0

Пожалуйста, сообщите больше информации в интересующем вас вопросе. Однако, я думаю, что это не намеренное поведение. Я думаю, проверьте свои другие реквизиты, возможно, с этими реквизитами эффект реквизита стиля становится переоцененным.

И все же, если это не так, проверьте базу данных-ui repo codebase на GitHub. По моему опыту работы с материалами, многие проблемы, которые я решил, перейдя через их кодовую базу и не используя их документ. Надеюсь, что информация поможет.

Смежные вопросы