Estoy tratando de exportar AppBar con estilo, este es mi código
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 AppBarEsto está dando un error predeclarado
Line 12:7: Parsing error: Identifier 'MuiAppBar' has already been declared.No puede importar:
import MuiAppBar from '@mui/material/AppBar';y luego cree una expresión de función con el mismo nombre. Simplemente cambie el nombre de su expresión de función a otra cosa y use ese nombre en su jsx
ejemplo:
const CustomMuiAppBar = ..... /// <CustomMuiAppBar />Ha declarado la función AppBar Styled con el mismo nombre. Ya está importando MuiAppBar desde mui. Debe elegir otro nombre para su función personalizada. Por ejemplo:
import MuiAppBar from '@mui/material/AppBar'; const CustomAppBar = styled()Aquí el nombre de la función personalizada es diferente del predeterminado. Prueba esto, debería funcionar.