英文:
Adding custom styles to the Mui v5 AppBar component
问题
在Typescript中为Mui v5的AppBar组件添加自定义样式时遇到了问题。
import { alpha } from '@mui/material/styles';
export function bgBlur(props: { color: any; blur?: any; opacity?: any; imgUrl?: any; }) {
const color = props?.color || '#000000';
const blur = props?.blur || 6;
const opacity = props?.opacity || 0.8;
const imgUrl = props?.imgUrl;
if (imgUrl) {
return {
position: 'relative',
backgroundImage: `url(${imgUrl})`,
'&:before': {
position: 'absolute',
top: 0,
left: 0,
zIndex: 9,
content: '""',
width: '100%',
height: '100%',
backdropFilter: `blur(${blur}px)`,
WebkitBackdropFilter: `blur(${blur}px)`,
backgroundColor: alpha(color, opacity),
},
};
}
return {
backdropFilter: `blur(${blur}px)`,
WebkitBackdropFilter: `blur(${blur}px)`,
};
}
在这里调用了bgBlur函数：
const StyledAppBar = styled(AppBar)(({ theme }) => ({
...bgBlur({ color: theme.palette.background.default }),
boxShadow: "none",
})) as typeof AppBar;
出现的错误是：
No overload matches this call. The last overload gave the following error.
英文:
I have a problem adding custom styles to the Mui v5 AppBar component in Typescript.
import { alpha } from '@mui/material/styles';
export function bgBlur(props: { color: any; blur?: any; opacity?: any; imgUrl?: any; }) {
const color = props?.color || '#000000';
const blur = props?.blur || 6;
const opacity = props?.opacity || 0.8;
const imgUrl = props?.imgUrl;
if (imgUrl) {
return {
position: 'relative',
backgroundImage: `url(${imgUrl})`,
'&:before': {
position: 'absolute',
top: 0,
left: 0,
zIndex: 9,
content: '""',
width: '100%',
height: '100%',
backdropFilter: `blur(${blur}px)`,
WebkitBackdropFilter: `blur(${blur}px)`,
backgroundColor: alpha(color, opacity),
},
};
}
return {
backdropFilter: `blur(${blur}px)`,
WebkitBackdropFilter: `blur(${blur}px)`,
};
}
I call bgBlur here
const StyledAppBar = styled(AppBar)(({ theme }) => ({
...bgBlur({ color: theme.palette.background.default }),
boxShadow: "none",
})) as typeof AppBar;
The error is
> No overload matches this call. The last overload gave the following
> error.
答案1
得分: 1
以下是要翻译的代码部分：
"It's because Typescript expect the position property to be a Property.Position (defined in cssstyle/index.d.ts), but can't infer properly that relative belongs to this union type.
Adding a as const fix the error.
const bgBlur = (props: {
color: any;
blur?: any;
opacity?: any;
imgUrl?: any;
}) => {
const color = props?.color || "#000000";
const blur = props?.blur || 6;
const opacity = props?.opacity || 0.8;
const imgUrl = props?.imgUrl;
return imgUrl
? {
position: "relative" as const, // <-- here,
backgroundImage: `url(${imgUrl})`,
"&:before": {
position: "absolute",
top: 0,
left: 0,
zIndex: 9,
width: "100%",
height: "100%",
backdropFilter: `blur(${blur}px)`,
WebkitBackdropFilter: `blur(${blur}px)`,
},
}
: {
backdropFilter: `blur(${blur}px)`,
WebkitBackdropFilter: `blur(${blur}px)`,
};
};
const StyledAppBar = styled(AppBar)(({ theme }) => ({
...bgBlur({ color: theme.palette.background.default }),
boxShadow: "none",
}));
希望这有所帮助。
英文:
It's because Typescript expect the position property to be a Property.Position (defined in cssstyle/index.d.ts), but can't infer properly that relative belongs to this union type.
Adding a as const fix the error.
const bgBlur = (props: {
color: any;
blur?: any;
opacity?: any;
imgUrl?: any;
}) => {
const color = props?.color || "#000000";
const blur = props?.blur || 6;
const opacity = props?.opacity || 0.8;
const imgUrl = props?.imgUrl;
return imgUrl
? {
position: "relative" as const // <-- here,
backgroundImage: `url(${imgUrl})`,
"&:before": {
position: "absolute",
top: 0,
left: 0,
zIndex: 9,
width: "100%",
height: "100%",
backdropFilter: `blur(${blur}px)`,
WebkitBackdropFilter: `blur(${blur}px)`,
},
}
: {
backdropFilter: `blur(${blur}px)`,
WebkitBackdropFilter: `blur(${blur}px)`,
};
};
const StyledAppBar = styled(AppBar)(({ theme }) => ({
...bgBlur({ color: theme.palette.background.default }),
boxShadow: "none",
}));
通过集体智慧和协作来改善编程学习和解决问题的方式。致力于成为全球开发者共同参与的知识库，让每个人都能够通过互相帮助和分享经验来进步。
评论