如何覆盖放大登录页面

Question

我使用的是较新的版本@aws-amplify/ui-react，而不是 aws-amplify-react 的旧版本。在旧版本中，您可以扩展 SignIn 和 SignUp 页面，将 ui 更改为您想要的任何内容，并且必须调用这些示例中的超级方法：https://medium.com/@pandeysoni/how-to-setup-customize-amplify-authentication-ui-using-hooks-36442f5fdc or https://blog.kylegalbraith.com/2018/11/29/how-to-easily-customize-the-aws-amplify-authentication-ui/ .

在新包中，虽然我似乎无法弄清楚如何完成 equivalent。这是我当前使用基本放大 ui:

的代码

<AmplifyAuthenticator usernameAlias="email">
      <AmplifySignUp
        slot="sign-up"
        usernameAlias="email"
        headerText="Create a new account"
        formFields={[
          {
            type: "email",
            label: "Email",
            placeholder: "Your company email address",
            required: true,
          },
          {
            type: "password",
            label: "Password",
            placeholder: "Password",
            required: true,
          },
        ]}
      />
      <AmplifySignIn
        slot="sign-in"
        usernameAlias="email"
        headerText="Sign in to your account"
      />
      <AppWithRoutes />
</AmplifyAuthenticator>

如果我将其更改为：

<AmplifyAuthenticator usernameAlias="email">
      <AppWithRoutes />
</AmplifyAuthenticator>

除了不使用我的自定义 headers 之类的东西之外，它似乎没有任何改变。所以很明显它正在拉一个默认值 SignIn/SignUp class。然后我看了这里：https://github.com/aws-amplify/amplify-js/blob/bf2f04888ea7e1e5364e1f669bb2847040fde684/packages/amplify-ui-components/src/components/amplify-authenticator/amplify-authenticator.tsx#L204 and found that they use AuthState to determine which auth component to load, and here: https://github.com/aws-amplify/amplify-js/blob/bf2f04888ea7e1e5364e1f669bb2847040fde684/packages/amplify-ui-components/src/components/amplify-authenticator/amplify-authenticator.tsx#L171 they seem to check to see if the auth component slot name exists, and if it doesn't then it returns the default AmplifySignIn class from here: https://github.com/aws-amplify/amplify-js/blob/bf2f04888ea7e1e5364e1f669bb2847040fde684/packages/amplify-ui-components/src/components/amplify-authenticator/amplify-authenticator.tsx#L145 .

我的假设是，如果我发送具有相同插槽名称的 class，这应该确定该插槽已被覆盖，并且不再是 return/render 默认登录页面。

interface CustomProps {
  slot: string;
}

const CustomSignIn: React.FC<CustomProps> = props => {
  const { slot } = props;
  return <div>This should show up</div>;
};

<AmplifyAuthenticator usernameAlias="email">
      <CustomSignIn slot="sign-in" />
      <AppWithRoutes />
</AmplifyAuthenticator>

我仍然得到与 SignIn、SignUp 完全相同的登录页面，没有任何自定义。我只是错过了一些非常明显的东西吗？我需要对插槽参数进行一些特殊处理吗？这不再可能了吗？我知道新软件包允许更多 CSS 覆盖和自定义，但它仍然非常有限。

如果我这样做：

<AmplifyAuthenticator usernameAlias="email">
    <div slot="sign-in">Hello</div>
    <AppWithRoutes />
</AmplifyAuthenticator>

然后它只放慢 div 和 Hello 一词的速度，正如我所期望的那样。所以也许我只是处理错了插槽？所以看起来 div 是类型

React.DetailedHTMLProps<React.HTMLAttributes, HTMLDivElement>

这就是插槽定义的地方。所以我将 CustomSignIn 道具更改为：

interface CustomProps extends HTMLAttributes<HTMLDivElement> {}

它返回到默认 sign-in sign-up 而不是正确覆盖。但是，如果我像这样将它包装在 div 中：

<AmplifyAuthenticator usernameAlias="email">
    <div slot="sign-in"><CustomSignIn /></div>
    <AppWithRoutes />
</AmplifyAuthenticator>

它正确显示了我从 CustomSignIn 返回的内容。所以我至少可以让它渲染我想要的组件，但我想从使用基础 AWS UI 开始，扩展和调整它而不是完全编写我自己的。

如果有人有任何想法或知道我遗漏的任何文档，请告诉我。同样，这是 @aws-amplify/ui-react 包，而不是 aws-amplify-react，它是旧版本。

谢谢

Answer 1

我已经测试过了，应该可以。您需要将“slot”放入标准 HTML 标签中。

const CustomSignIn: React.FC<CustomProps> = props => {
  return <div slot="sign-in">This should show up</div>;
};

<AmplifyAuthenticator usernameAlias="email">
  <CustomSignIn />
  <AppWithRoutes />
</AmplifyAuthenticator>

如何覆盖放大登录页面

How to Override Amplify Sign In Page

amazon-web-services

aws-amplify

amplifyjs