Как переопределить материал пользовательского интерфейса с помощью крючков - PullRequest
Новая
       13

Как переопределить материал пользовательского интерфейса с помощью крючков

0 голосов
/ 22 февраля 2019

Я пытаюсь создать AppBar, вырезанный в верхней части страницы и наведенный на другой Drawer с React Hooks и Material Ui, используя имя класса.Все как описано в: https://material -ui.com / demos / drawers / # clipped-under-the-app-bar

Итак, мы имеем 

const useStyles = makeStyles(theme => ({
root: {
    display: 'flex',
    height: '100%',
},
drawer: {
    width: drawerWidth,
    flexShrink: 0,
},
appBar: {
   zIndex: theme.zIndex.drawer + 1,
},
menuButton: {
    marginRight: 20,
    [theme.breakpoints.up('md')]: {
        display: 'none',
    },
},

}));

И reder: 

     <div className={classes.root}>
                <CssBaseline/>
                <LoadingResults showLoading={showLoadingSpinner}/>
                <AppBar position="fixed" className={classes.appBar} >
                     ...
                </AppBar>
    ....

Проблема в том, что стиль, применяемый с className, добавляется последним из элемента, поэтому он не переопределяет стиль оригинала:

class = "MuiPaper-root-12 MuiPaper-elevation4-18 MuiAppBar-root-3 MuiAppBar-positionFixed-4 MuiAppBar-colorPrimary-10 mui-fixed Hook-appBar-1b6f20g "

Я знаю, что могу использовать встроенные стили, но интересно знать, могу ли я переопределить стили, используя classNames с хуками, как это было с "устаревшим" компонентным подходом?

Вот песочница: https://codesandbox.io/s/w7njqorzy7?fontsize=14

Что происходит, когда в песочнице код работает нормально (панель инструментов над левосторонним контейнером) enter image description here

Но когда тот же проект загружен и скомпилирован, это не так: enter image description here

Глядя на отладчик, стили встроены.В песочнице крючки находятся внизу:

enter image description here

В браузере, когда приложение запускается с помощью «run start», оно вверху:

enter image description here

Так вот в чем разница, но почему и как это исправить?

Ответы [ 2 ]

0 голосов
/ 24 февраля 2019

Вы можете переопределить стили материала-интерфейса с помощью classes реквизитов вместо classNames.

Например, 

<AppBar position="fixed" classes={{root: classes.appBar}}>

Здесь я использовал клавишу root для переопределения, тамЕсть много других клавиш, с которыми вы можете поиграть.

Каждый компонент Material-ui имеет раздел API.Вы получите список переопределяющих ключей, перечисленных там.

Некоторые полезные ссылки -

https://material -ui.com / customization / overrides / # overriding-with-classes

https://material -ui.com / api / app-bar /

0 голосов
/ 23 февраля 2019

Оказалось, что мой bootstrap.js с установкой новых стилей был в неправильном месте. 

import { install } from '@material-ui/styles';

install();

Должен быть выполнен перед импортом любого компонента пользовательского интерфейса материала.

...