Попытка переопределить css AppBar из React Material Ui, - PullRequest
1 голос
/ 06 марта 2020
<AppBar className={classes.header}/>

Подозреваемый

  const classes = useStyles();

    const useStyles = makeStyles((theme: Theme) =>
  createStyles({
    header: {
      borderTop: '10px',
      borderTopColor: '#367BB5'
    },
    grow: {
      flexGrow: 1
    },
    menuButton: {
      marginRight: theme.spacing(2),
    }
);

Стили роста и menuButton были получены из кода AppBar непосредственно из Material Ui, но я пытаюсь реализовать стиль заголовка в AppBar, но безуспешно Я прочитал документацию, но она мне не очень понятна.

export default Header;

РЕДАКТИРОВАТЬ:

Документы говорят, что Style sheet name: MuiAppBar, но всякий раз, когда я изменяю заголовок на это, он ничего не меняет


    const useStyles = makeStyles({
      root: {
        position: 'static', // doesnt work
        borderTop: '100px', // doesnt work
        borderTopColor: '#367BB5', // doesnt work
        backgroundColor: '#fafafa',
      },
    })

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

Это позволяет мне изменить backgroundColor, но другие свойства не работают. Не уверен, почему

1 Ответ

1 голос
/ 06 марта 2020

Важно, чтобы вы следили за этой страницей: https://material-ui.com/customization/theming/ Вам необходимо использовать ThemeProvider, чтобы настроить стиль.

...