reactjs - 自定义 AmplifySignOut 的布局

Question

我目前正在开发集成 AWS Amplify 的 React 应用程序。到目前为止，这是一个很棒的工具，但我发现很难自定义组件。特别是我想设置 AmplifySignOut 组件的样式。
根据documentation (请参阅页面上的最后一段)将主题传递给 withAuthenticator-component 不再像这样工作了。
我不知道如何将主题传递给 AmplifySignOut 组件，该组件会覆盖所创建按钮的默认布局。到目前为止，我认为this是默认布局，但我不是 100% 确定。
如果有人能在这里指出我正确的方向，那就太好了:)
我使用这样的组件(不工作):

import React from 'react'
import { NavLink } from "react-router-dom";
import './Navbar.css'
import { AmplifySignOut } from '@aws-amplify/ui-react';


function Navbar(props) {
  const MyTheme = {
    NavButton: { 'fontWeight': '10' },
  }

  return (
    <div className="navbar">
      <NavLink exact to="/">Home</NavLink>
      <NavLink to="/pdservice">Drucker & Netzwerk</NavLink>
      <AmplifySignOut theme={MyTheme}/>
    </div>
  )
}

export default Navbar;

此致

Answer 1

就我而言，我刚刚编写了一个完全自定义的按钮，它调用了放大函数。你可以完全按照你的意愿设计这个。也许这段代码有帮助？

import React from 'react'
import {Auth} from "aws-amplify";


function CustomSignoutButton() {
  const signOut = (e) => {
      e.preventDefault();
      Auth.signOut();
      window.location.reload() <!-- it also works without, but just to really kick the user out.-->
    }
  return (
    <button onClick={signOut}>
      Sign out
    </button>
  )
}

export default CustomSignoutButton;