material-ui определяет стили в пользовательской теме

Question

Я использую реакцию с материалом-ui, и я хочу переопределить тему в соответствии со своими собственными потребностями, я увидел, что вы можете изменить все свойства каждого компонента, но я попытался изменить стиль панели приложений, но ничего не произошло.

Вот что я пробовал:

let theme = { 
    appBar: { 
     style:{ 
      height: 128 
     } 
    } 
} 

Я знаю, что я могу просто изменить высоту AppBar, но позволяю сказать, что я хочу, чтобы изменить то, что это не свойство, как «главные» в выдвижном ящике стиль, например:

let theme= { 
    drawer:{ 
     style:{ 
      top: 64 
     } 
    } 
} 

Так как я могу это сделать?

Answer 1

Попробуйте установить значения без поддержки стиля.

Таким образом, вместо:

let theme = { 
    appBar: { 
     style:{ 
      height: 128 
     } 
    } 
} 

Изменить на:

let theme = { 
    appBar: {    
     height: 128 
    } 
} 

//Example 
const muiTheme = getMuiTheme(theme); 
... 

Answer 2

Pachu. Для ответа на ваш вопрос: «как изменить тему Material-ui?». Вы можете попробовать:

const muiTheme = getMuiTheme({ 
    palette: { 
    textColor: cyan500, 
    }, 
    appBar: { 
    height: 50, 
    }, 
}); 

Вы можете сослаться на эту ссылку: http://www.material-ui.com/#/customization/themes

Answer 3

Вы можете установить только ограниченный набор свойств в theme объекта. Вы можете найти все поддерживаемые свойства и как они меняют внешний вид с помощью этого online tool. Если у вас нет, то что вам нужно в theme, поэтому вы можете настроить его вручную через style.

Обратите внимание, что в компонентах Material-UI обычно есть некоторые свойства стиля. например style, titleStyle, iconStyleLeft, iconStyleRight для App bar.