如何在 MaterialUI 中扩展 OverridableComponent 接口

Question

我正在尝试使用Container带有样式组件的组件，ContainerProps但是我无法传递component属于OverridableComponent接口的prop 。下面的代码给了我错误，告诉我我不能传递component财产。当我改变<Container/>到<MuiContainer/>它的工作原理。

MuiContainer有类型，OverridableComponent<ContainerTypeMap<{}, 'div'>>但我无法OverridableComponent从中导入@material-ui/core

我怎样才能使传递component财产成为可能？

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>
    </>
  );
};

Answer 1

组件属性的使用

const Container = styled(MuiContainer)<ContainerProps<'main', { component: 'main' }>>``;