自定义 AmplifySignOut 布局

Question

我目前正在开发集成了 AWS Amplify 的 React 应用程序。到目前为止，这是一个很棒的工具，但我发现很难自定义组件。特别是我想设计 AmplifySignOut 组件的样式。

根据 documentation（参见页面最后一段）将主题传递给 withAuthenticator 组件不再像这样工作了。我不知道如何将主题传递给 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 />

自定义 AmplifySignOut 布局

Customize layout of AmplifySignOut

reactjs

aws-amplify