How to extend OverridableComponent interface in Material-UI

user_12987363 0
Viewed 1858

I'm trying to use Container component with styled-components using ContainerProps but then I can't pass component prop which belongs to OverridableComponent interface. Code below gives me error which tells me that I can't pass component property. When I change <Container/> to <MuiContainer/> it works.

MuiContainer has type OverridableComponent<ContainerTypeMap<{}, 'div'>> but I can't import OverridableComponent from @material-ui/core

How can I make passing component property possible?

import { Container as MuiContainer, ContainerProps } from '@material-ui/core';
import React from 'react';
import styled from 'styled-components';

const Container = styled(MuiContainer)<ContainerProps>``;

export const Test = () => {
  return (
    <>
      <Container maxWidth="lg" component="main">
        content
      </Container>
    </>
  );
};
material-ui styled-components typescript reactjs
2 Answers
user_32123790

You can tell the Typescript compiler to retain the original Container prop types by asserting it:

import MuiContainer from "@mui/material/Container";
import { styled } from "@mui/material/styles";

const Container = styled(MuiContainer)`
  background-color: pink;
  padding: 16px;
` as typeof MuiContainer;

export default function StyledComponents() {
  return (
    <Container maxWidth="lg" component="main">
      content
    </Container>
  );
}

Live Demo

Codesandbox Demo

Reference

user_94494260
Related