I am trying to export styled AppBar,this is my code
import * as React from 'react';
import { styled, useTheme } from '@mui/material/styles';
import MuiAppBar from '@mui/material/AppBar';
import Toolbar from '@mui/material/Toolbar';
import Typography from '@mui/material/Typography';
import MenuIcon from '@mui/icons-material/Menu';
const MuiAppBar = styled(MuiAppBar, {
shouldForwardProp: (prop) => prop !== 'open',
})(({ theme, open }) => ({
zIndex: theme.zIndex.drawer + 1,
transition: theme.transitions.create(['width', 'margin'], {
easing: theme.transitions.easing.sharp,
duration: theme.transitions.duration.leavingScreen,
}),
...(open && {
marginLeft: drawerWidth,
width: `calc(100% - ${drawerWidth}px)`,
transition: theme.transitions.create(['width', 'margin'], {
easing: theme.transitions.easing.sharp,
duration: theme.transitions.duration.enteringScreen,
}),
}),
}));
const AppBar = () => {
return (
<div>
<MuiAppBar position="fixed" open={open}>
<Toolbar>
<IconButton
color="inherit"
aria-label="open drawer"
onClick={handleDrawerOpen}
edge="start"
sx={{
marginRight: '36px',
...(open && { display: 'none' }),
}}
>
<MenuIcon />
</IconButton>
<Typography variant="h6" noWrap component="div">
Mini variant drawer
</Typography>
</Toolbar>
</MuiAppBar>
</div>
)
}
export default AppBar
This is giving pre-declared error
Line 12:7: Parsing error: Identifier 'MuiAppBar' has already been declared.
You cannot import:
import MuiAppBar from '@mui/material/AppBar';
and then create a function expression with the same name. Just change the name of your function expression to something else and use that name in your jsx
example:
const CustomMuiAppBar = .....
///
<CustomMuiAppBar />
You have declared The appBar Styled function with the same name. You are already importing MuiAppBar from mui. You must choose another name for your custom function. For example:
import MuiAppBar from '@mui/material/AppBar';
const CustomAppBar = styled()
Here the custom function name is different from the default one. Try this, It should work.