我正在嘗試匯出樣式化的 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.
uj5u.com熱心網友回復：
您不能匯入：
import MuiAppBar from '@mui/material/AppBar';
然后創建一個同名的函式運算式。只需將函式運算式的名稱更改為其他名稱并在 jsx 中使用該名稱
例子：
const CustomMuiAppBar = .....
///
<CustomMuiAppBar />
uj5u.com熱心網友回復：
您已宣告具有相同名稱的 AppBar 樣式函式。您已經在從 mui 匯入 MuiAppBar。您必須為自定義函式選擇另一個名稱。例如：
import MuiAppBar from '@mui/material/AppBar';
const CustomAppBar = styled()
這里的自定義函式名稱與默認名稱不同。試試這個，它應該作業。
轉載請註明出處，本文鏈接：https://www.uj5u.com/caozuo/310951.html
標籤：javascript 反应 ecmascript-6 材质-ui
上一篇：react-router5瀏覽器后退按鈕不重置歷史記錄？
下一篇：在事件處理程式中呼叫反應鉤子