CODEWITHSUNDEEP
cssreactjstypescriptoverriding
awfuldev2020
awfuldev2020

Reputation: 95

Trying to override the css of AppBar from React Material Ui,

<AppBar className={classes.header}/>

The suspect

  const classes = useStyles();


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

The grow, and menuButton styling came from the AppBar code directly from Material Ui, but I am trying to implement the header style into the AppBar, unsuccessfully, I have read the documentation but its not very clear to me. 

export default Header;

EDIT:

The docs say that the Style sheet name: MuiAppBar but whenever I change header to that, it doesn't change anything


    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 }}>

Doing this allows me to change the backgroundColor, but the other properties don't work. Not sure why

Upvotes: 1

Views: 1382

Answers (1)

Gaspar Teixeira
Gaspar Teixeira

Reputation: 1267

It's important that you follow this page: https://material-ui.com/customization/theming/ You need to use the ThemeProvider in order to custom the style.

Upvotes: 1

Related Questions