英文:
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",}));
通过集体智慧和协作来改善编程学习和解决问题的方式。致力于成为全球开发者共同参与的知识库，让每个人都能够通过互相帮助和分享经验来进步。
评论