Reactjs 我是如何制作定制标签的？

我已经制作了如下组件

在MyButton.tsx中

import React from 'react';
import { Button } from '@material-ui/core';
import { Theme, makeStyles, createStyles } from "@material-ui/core/styles";

interface IMyButton {
  title: string,
}

export default function Parent(props: IMyButton) {
  return (
    <Button>
      {props.title}
    </Button>
  );
}

从“React”导入React；
从“@material ui/core”导入{Button}；
从“@material ui/core/styles”导入{Theme，makeStyles，createStyles}”；
接口IMyButton{
标题：字符串，
}
导出默认函数父项（props:IMyButton）{
返回(
{props.title}
);
}

在App.tsx中

import React from 'react';
import MyButton from './MyButton'

function App() {
  return (
    <div>
      <MyButton title="title" />
    </div>
  );
}

export default App;

从“React”导入React；
从“/MyButton”导入MyButton
函数App（）{
返回(
);
}
导出默认应用程序；

它工作得和我预期的一样好。 但我想做一个自定义标记，如下所示

<MyButton>title</MyButton>

标题

我不知道应该查阅哪些文件

如果您想给我一个解决方案，请不要使用类，而是使用类型脚本和函数

---

谢谢您抽出时间。

将您的

MyButton.tsx

更改为

interface IMyButton {
  children: React.ReactNode,
}

export default function Parent(props: IMyButton) {
     return (
       <Button>
         {props.children}
       </Button>
     );
    }

接口IMyButton{
子项：React.React节点，
}
导出默认函数父项（props:IMyButton）{
返回(
{props.children}
);
}

你可以用

<MyButton>title</MyButton>

标题

你能再给我一些建议吗？我更改了引用您答案的代码，但它不适用于编译错误。好的，在看到你的代码被更改后，我解决了我的问题。非常感谢。