MUI use styled and component prop in one component

Question

I use emotion for custom css for my mui component.

const StyledContainer = styled(Container)`
    display: flex;
    flex-direction: column;
    margin-top: ${props => props.theme.spacing(2)};
\`;

And i can use Material UI change the root element that will be rendered via a prop called component.

<Container component="main"/>

import { Container, styled } from "@mui/material";
import { ReactNode } from "react";
import { Footer } from "./Footer.tsx";
import { Header } from "./header/Header.tsx";

export const Layout = (
    {
        children,
    }: {
        children: ReactNode,
    },
) => {
    return (
        <>
            <Header/>
            <StyledContainer component="main">
                {children}
            </StyledContainer>
            <Footer/>
        </>
    );
};

const StyledContainer = styled(Container)`
    display: flex;
    flex-direction: column;
    margin-top: ${props => props.theme.spacing(2)};
`;

I have this problem when i use styled component and component prop

Answer 1

This work for me. I rewrite this on MUI theme.

theme.components = {
        MuiContainer: {
            defaultProps: {
                component: "main",
            },
        }
}