After styling mui component with styled component it is not taking props

Question

import { Link } from "react-router-dom";
import { MoviesType } from "../types";
import { FeturedCardContainer, MainCard, StyledCardMedia } from "./style";

type FeaturedMovieProps = {
    movie: MoviesType;
};

const FeaturedMovie = ({ movie }: FeaturedMovieProps) => {
    if (!movie) return null;
    return (
        // Styled Box
        <FeturedCardContainer component={Link} to={`/movie/${movie.id}`}>
            {/* Styled Card */}
            <MainCard>
                <StyledCardMedia
                    component="img"
                    alt={movie.title}
                    title={movie.title}
                    image={`https://image.tmdb.org/t/p/original/${movie.backdrop_path}`}
                />
            </MainCard>
        </FeturedCardContainer>
    );
};
export default FeaturedMovie;

import { Box, Card, CardMedia } from "@mui/material";
import { styled } from "@mui/styles";

export const FeturedCardContainer = styled(Box)(() => ({
    marginBottom: "20px",
    display: "flex",
    justifyContent: "center",
    height: "490px",
    textDecoration: "none",
}));

export const MainCard = styled(Card)(() => ({
    width: "100%",
    display: "flex",
    justifyContent: "flex-end",
    flexDirection: "column",
    position: "relative",
}));

export const StyledCardMedia = styled(CardMedia)(() => ({
    position: "absolute",
    top: "0",
    right: "0",
    height: "100%",
    width: "100%",
    backgroundColor: "rgba(0,0,0,0.575)",
    backgroundBlendMode: "darken",
}));

After I styled the component it showing the error.

ERROR 1

Type '{ children: Element; component: ForwardRefExoticComponent<LinkProps & RefAttributes<HTMLAnchorElement>>; to: string; }' is not assignable to type 'IntrinsicAttributes & Omit<SystemProps<Theme> & { children?: ReactNode; component?: ElementType<any> | undefined; ref?: Ref<...> | undefined; sx?: SxProps<...> | undefined; } & CommonProps & Omit<...>, "className" | "classes"> & StyledComponentProps<...> & Omit<...> & { ...; }'.
  Property 'to' does not exist on type 'IntrinsicAttributes & Omit<SystemProps<Theme> & { children?: ReactNode; component?: ElementType<any> | undefined; ref?: Ref<...> | undefined; sx?: SxProps<...> | undefined; } & CommonProps & Omit<...>, "className" | "classes"> & StyledComponentProps<...> & Omit<...> & { ...; }'.
    11 |     return (
    12 |         // Styled Box
  > 13 |         <FeturedCardContainer component={Link} to={`/movie/${movie.id}`}>
       |                                                ^^
    14 |             {/* Styled Card */}
    15 |             <MainCard>
    16 |                 <StyledCardMedia

ERROR 2

Type '{ component: string; alt: string; title: string; image: string; }' is not assignable to type 'IntrinsicAttributes & Omit<{ children?: ReactNode; classes?: Partial<CardMediaClasses> | undefined; image?: string | undefined; src?: string | undefined; sx?: SxProps<...> | undefined; } & CommonProps & Omit<...>, "className" | "classes"> & StyledComponentProps<...> & Omit<...> & { ...; }'.
  Property 'component' does not exist on type 'IntrinsicAttributes & Omit<{ children?: ReactNode; classes?: Partial<CardMediaClasses> | undefined; image?: string | undefined; src?: string | undefined; sx?: SxProps<...> | undefined; } & CommonProps & Omit<...>, "className" | "classes"> & StyledComponentProps<...> & Omit<...> & { ...; }'.
    15 |             <MainCard>
    16 |                 <StyledCardMedia
  > 17 |                     component="img"
       |                     ^^^^^^^^^
    18 |                     alt={movie.title}
    19 |                     title={movie.title}
    20 |                     image=

I am using Mui + React. Trying to style mui component with styled component but after styling the component I am unable to pass some of the props If I go with default Component it is taking the props but after styling it is not taking

Answer 1

You should use Link tag inside FeturedCardContainer tag.

       <FeturedCardContainer>
            <Link to={`/movie/${movie.id}`}>
             <MainCard>
                <StyledCardMedia
                    alt={movie.title}
                    title={movie.title}
                    image={`https://image.tmdb.org/t/p/original/${movie.backdrop_path}`}
                />
             </MainCard>
            </Link
        </FeturedCardContainer>

and no need to use component={img} on StyledCardMedia