MUI组件库类型问题

Question

自己定义的StyledAccordionSummary组件里一直会报类型错误，有没有遇到过的好兄弟哇，求解

类型“{ children: Element; }”与类型“IntrinsicAttributes & MUIStyledCommonProps”不具有相同的属性。 ts(2559)

import Accordion from '@mui/material/Accordion'
import ArrowForwardIosSharpIcon from '@mui/icons-material/ArrowForwardIosSharp'
import { AccordionSummary } from '@mui/material'
import AccordionDetails from '@mui/material/AccordionDetails'
import Typography from '@mui/material/Typography'
import { styled } from '@mui/material'

const StyledAccordionSummary = styled((props) => {
  return (
    <AccordionSummary
      expandIcon={<ArrowForwardIosSharpIcon sx={{ fontSize: '0.9rem' }} />}
      {...props}
    />
  )
})(({ theme }) => ({
  backgroundColor: 'rgba(0, 0, 0, .03)',
  flexDirection: 'row-reverse',
  '& .MuiAccordionSummary-expandIconWrapper.Mui-expanded': {
    transform: 'rotate(90deg)',
  },
  '& .MuiAccordionSummary-content': {
    marginLeft: theme.spacing(1),
  },
  ...theme.applyStyles('dark', {
    backgroundColor: 'rgba(255, 255, 255, .05)',
  }),
}))

const MyComponent = () => {
  return (
    <Accordion disableGutters elevation={0} square>
      <StyledAccordionSummary>
        <Typography>Accordion 1</Typography>
      </StyledAccordionSummary>
      <AccordionDetails>
        <Typography>
          Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed do
          eiusmod tempor incididunt ut labore et dolore magna aliqua.
        </Typography>
      </AccordionDetails>
    </Accordion>
  )
}
export default MyComponent

Answer 1

以下回复参考：皆我百晓生、券券喵儿等免费微信小程序作答:

在您的 TypeScript 项目中，您尝试使用 styled 套件来自定义 StyledAccordionSummary 组件。然而，在尝试使用 TypeScript 类型时遇到了一个类型错误：children 属性与 IntrinsicAttributes & MUIStyledCommonProps 的属性列表不匹配。

要解决此问题，您可以将 children 属性更改为其他类型的参数，如数组、对象或其他类型的变量。例如：

import React from "react";
import Accordion from "@mui/material/Accordion";
import ArrowForwardIosSharpIcon from "@mui/icons-material/ArrowForwardIosSharp";
import Typography from "@mui/material/Typography";

// 假设这是您的 StyledAccordionSummary 组件
const StyledAccordionSummary = styled((props) => {
  return (
    <AccordionSummary
      expandIcon={<ArrowForwardIosSharpIcon sx={{ fontSize: "0.9rem" }} />}
      {...props}
    />
  );
})(({ theme }) => ({
  backgroundColor: "rgba(0, 0, 0, 0.03)",
  flexDirection: "row-reverse",
  "& .MuiAccordionSummary-expandIconWrapper.Mui-expanded": {
    transform: "rotate(90deg)",
  },
  "& .MuiAccordionSummary-content": {
    marginLeft: theme.spacing(1),
  },
  ...theme.applyStyles("dark", {
    backgroundColor: "rgba(255, 255, 255, 0.05)",
  }),
}));

// 您的 MyComponent 函数现在应该看起来像这样:
function MyComponent() {
  const [expanded, setExpanded] = React.useState(false);

  // ...
}

// 这是您的 MainComponent 函数:
function MainComponent() {
  return (
    <div>
      {/* 使用您的原始 MyComponent */}
      <MyComponent expanded={expanded} />
    </div>
  );
}

export default MainComponent;

这里的关键点在于更新 styled 组件以接受一个名为 children 的参数，并将其设置为数组，以便能够接收任何类型的数据作为其组成部分。这有助于解决 IntrinsicAttributes & MUIStyledCommonProps 不兼容的问题。

如果您希望进一步解释如何在 TypeScript 中处理不同类型的数据，或者想要了解有关如何使用 styled 套件自定义组件的更多信息，请告诉我！