如何使用 'styled' 来自 material ui 的反应

Question

我正在尝试导出样式化的 AppBar，这是我的代码

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

这是预先声明的错误

  Line 12:7:  Parsing error: Identifier 'MuiAppBar' has already been declared.

Answer 1

您无法导入：

import MuiAppBar from '@mui/material/AppBar';

然后创建同名函数表达式。只需将函数表达式的名称更改为其他名称并在 jsx

中使用该名称

示例：

const CustomMuiAppBar = .....
///
<CustomMuiAppBar />

Answer 2

您已经声明了具有相同名称的 appBar Styled 函数。您已经从 mui 导入了 MuiAppBar。您必须为自定义函数选择另一个名称。例如：

import MuiAppBar from '@mui/material/AppBar';

const CustomAppBar = styled()

此处自定义函数名称与默认名称不同。试试这个，它应该有效。

如何使用 'styled' 来自 material ui 的反应

How to use 'styled' from material ui react

javascript

ecmascript-6

reactjs

material-ui