时间戳

首页 > 解决方案 > 如何使用材料 ui 中的“样式”反应

javascript - 如何使用材料 ui 中的“样式”反应

问题描述

我正在尝试导出样式化的 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.

标签： javascriptreactjsecmascript-6material-ui

解决方案

您不能导入：

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

然后创建一个同名的函数表达式。只需将函数表达式的名称更改为其他名称，然后在 jsx 中使用该名称

例子：

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

推荐阅读