I want to customize my appbar size on react Mui(currently using v4, but I get an error everytime I try to create a style.

My current Code

import React from "react";
import { AppBar, Toolbar, Typography, Box, makeStyles } from '@material-ui/core';
import { Link } from "react-router-dom";
import './Navbar.css'

const styles ={
    customizeToolbar: {
        minHeight: 36
    }
};

function Navbar(){
    return(
        <AppBar position='sticky' >
            <Toolbar variant='dense' style={classes.customizeToolbar} >

            </Toolbar>
            
        </AppBar>
    )
}

export default Navbar;

CodePudding user response：

import React from "react";
import { AppBar, Toolbar, Typography, Box, makeStyles } from '@material-ui/core';
import { Link } from "react-router-dom";
import './Navbar.css'

const styles ={
  customizeToolbar: {
    minHeight: 36
  }
};

function Navbar(){
  return(
    <AppBar position='sticky' >
        <Toolbar variant='dense' style={styles.customizeToolbar} >

        </Toolbar>
        
    </AppBar>
  )
}

export default Navbar;

CodePudding user response：

If you wish to customize the theme, you need to use the ThemeProvider component in order to inject a theme into your application. You must create styles with makeStyles, then you can create variable classes and use it in jsx with className not style. If you want customize not only Navbar but all components you can set ThemeProvider in index.js

import { createTheme, ThemeProvider } from '@mui/material/styles';
import { createStyles, makeStyles } from '@mui/styles';

const useStyles = makeStyles(() =>
  createStyles({
    customizeToolbar: {
        minHeight: 36
    }
  })
);
const theme = createTheme();

function Navbar(){
    const classes = useStyles();
    return(
      <ThemeProvider theme={theme}>
        <AppBar position='sticky' >
            <Toolbar variant='dense' className={classes.customizeToolbar} >

            </Toolbar>
            
        </AppBar>
       </ThemeProvider>
    )
}