自定义 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;

Answer 2

创建新组件（在我的例子中是“src\components\SignOut.js”）

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

function SignOutButton() {
    const signOut = (e) => {
        e.preventDefault();
        Auth.signOut().then(()=>{
            window.location.reload(false); 
        });
    }
    return (
        <button onClick={signOut}>
            Sign out
        </button>
    )
}

export default SignOutButton;

将其导入您的应用程序（如果路径与我的不同，请记住将路径替换为正确的路径）

import SignOutButton from './components/SignOut';

然后你可以在任何你想要的地方使用它

<SignOutButton />