如何在 Material-UI 中扩展 OverridableComponent 接口答案

【问题标题】：How to extend OverridableComponent interface in Material-UI如何在 Material-UI 中扩展 OverridableComponent 接口
【发布时间】：2020-12-11 22:57:40
【问题描述】：

我正在尝试使用ContainerProps 将Container 组件与样式组件一起使用，但是我无法传递属于OverridableComponent 接口的component 属性。下面的代码给了我错误，告诉我我不能通过 component 属性。当我将 <Container/> 更改为 <MuiContainer/> 时，它可以工作。

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

如何使传递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>
    </>
  );
};

【问题讨论】：

这仍然是个问题吗？我用你的代码创建了一个代码框，它按预期工作。

标签： reactjs typescript material-ui styled-components

【解决方案1】：

Usage of component prop

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

【讨论】：

【解决方案2】：

您可以通过断言来告诉 Typescript 编译器保留原始的 Container 属性类型：

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

现场演示

参考

https://mui.com/guides/composition/#with-typescript

【讨论】：