Saurabh
Saurabh

Reputation: 1662

How to use 'styled' from material ui react

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.

Upvotes: 0

Views: 470

Answers (2)

Ahmmed Abir
Ahmmed Abir

Reputation: 189

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.

Upvotes: 0

jsonderulo
jsonderulo

Reputation: 1494

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

Upvotes: 1

Related Questions