Javascript TS错误-创建自定义反应警报组件

我正在尝试创建一个定制的react material ui alert组件，通过简单地将文本和严重性作为参数传入，我可以在不同的页面上调用该组件。我正在尝试使用这个：

export default function CustomAlert(severity: string, text: string){
    <Alert style={{width:'50%'}} severity={severity}> {text}</Alert>
}

我怎样才能解决这个问题？或者是否有其他方法来定制此组件

编辑：我仍然无法在其他页面中使用它：

  function StatusMessage(){
    if (isRemoved){
      return (
      <Alert style={{width:'25%'}} severity="success"> User Removed</Alert>
        )
      }
      else{
        if(errorMessage!=''){
        if (errorMessage.includes(`Couldn't find user`)){
          return (
            <div>
            {/* <Alert style={{width:'25%'}} severity="error"> Couldn't Find User</Alert> */}
            <CustomAlert></CustomAlert>
            </div>
              )
        }       
      }}
  }

---

警报

只能接受有限数量的字符串或未定义的字符串，因此必须明确说明passs字符串属于此类型

type Severity=“error”|“success”|“info”|“warning”|未定义；
导出默认功能CustomAlert（严重性：严重性，text=“对不起”）{
{text}
}

---

现在，TS编译器知道，

severity

将属于联合类型

severity

，并且不应该抛出错误。

参数中的

severity=“error”

只是为了测试。最初，我希望参数仅为severity，以便可以从其他页面传递它。你明白我的意思吗？有道理，但我的回答仍然有效。事实上，现在更明显的是编译器会感到不安——当警报采用更窄的类型时，它不允许使用更宽的类型。但是，我到底应该如何编写参数呢？它不会总是一个“错误”更新我的答案！啊，对不起，我错过了那件事。有道理。但我仍然无法将此应用到我的另一页中。当我调用这个组件时，它会给我错误。更新的qs

  function StatusMessage(){
    if (isRemoved){
      return (
      <Alert style={{width:'25%'}} severity="success"> User Removed</Alert>
        )
      }
      else{
        if(errorMessage!=''){
        if (errorMessage.includes(`Couldn't find user`)){
          return (
            <div>
            {/* <Alert style={{width:'25%'}} severity="error"> Couldn't Find User</Alert> */}
            <CustomAlert></CustomAlert>
            </div>
              )
        }       
      }}
  }

JSX element type 'void' is not a constructor function for JSX elements.ts(2605)
Type '{}' is not assignable to type '(IntrinsicAttributes & "success") | (IntrinsicAttributes & "info") | (IntrinsicAttributes & "warning") | (IntrinsicAttributes & "error")'.
  Type '{}' is not assignable to type '"error"'.ts(2322)