React.js中如何自定义第三方库组件 替换mgt-react登录UI为MUI按钮

有两种成熟的实现方案，无需额外做props透传即可满足你的需求：

方法1：使用Login组件的自定义模板能力（推荐，无需修改原有登录逻辑） #

mgt-react的Login组件原生支持传入自定义子元素替换默认的登录按钮UI，你只需要把Material UI的Button组件作为Login的子元素传入即可，原有的loginInitiated、loginCompleted等props的绑定逻辑完全不受影响，不需要做任何额外调整。

import { Login, Providers } from '@microsoft/mgt-react';
import Button from '@mui/material/Button';

// 原有处理函数保持不变
const handleLoginStarted = () => {
  // 登录开始的业务逻辑
};
const handleLoginCompleted = (event) => {
  // 登录完成的业务逻辑
};

// 组件调用写法
<Login 
  loginInitiated={handleLoginStarted} 
  loginCompleted={handleLoginCompleted}
>
  <Button variant="contained" color="primary">
    登录
  </Button>
</Login>

方法2：完全自定义登录触发逻辑 #

如果你不需要渲染Login组件的任何默认结构，也可以直接调用Providers的底层登录API，自己绑定对应的回调逻辑，完全使用原生Material UI Button实现交互：

import { Providers } from '@microsoft/mgt-react';
import Button from '@mui/material/Button';

const handleCustomLogin = async () => {
  // 触发原loginInitiated回调
  handleLoginStarted();
  try {
    // 调用mgt内置登录能力
    await Providers.globalProvider.login();
    // 触发原loginCompleted回调
    handleLoginCompleted();
  } catch (error) {
    // 可自行补充登录失败的处理逻辑
    console.error('登录失败：', error);
  }
};

// 直接渲染MUI原生按钮
<Button variant="contained" color="primary" onClick={handleCustomLogin}>
  登录
</Button>

内容的提问来源于stack exchange，提问作者Dijiflex