如何覆盖Amplify登录页

Question

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

不过，在新的软件包中，我似乎不知道如何实现等效功能。这是我目前使用基本放大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>

除了不使用我的自定义头之类的之外，它似乎没有改变任何事情。很明显，它是在拉一个默认的SignIn/SignUp类。然后我看了看：https://github.com/aws-amplify/amplify-js/blob/bf2f04888ea7e1e5364e1f669bb2847040fde684/packages/amplify-ui-components/src/components/amplify-authenticator/amplify-authenticator.tsx#L204并发现他们使用AuthState来确定要加载哪个身份验证组件，这里：https://github.com/aws-amplify/amplify-js/blob/bf2f04888ea7e1e5364e1f669bb2847040fde684/packages/amplify-ui-components/src/components/amplify-authenticator/amplify-authenticator.tsx#L171他们似乎在检查auth组件插槽名称是否存在，如果不存在，则从这里返回默认的AmplifySignIn类：https://github.com/aws-amplify/amplify-js/blob/bf2f04888ea7e1e5364e1f669bb2847040fde684/packages/amplify-ui-components/src/components/amplify-authenticator/amplify-authenticator.tsx#L145。

我的假设是，如果我发送一个具有相同插槽名称的类，这应该确定插槽被覆盖，并且不再返回/呈现默认的SignIn页面。

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>

然后，它只减慢了带有单词Hello的符号div的速度，就像我所期望的那样。所以也许我只是处理错了插槽？所以看起来div是类型

React。详细HTML道具<反应HTMLAttributes，HTMLDivElement>

这就是定义slot的地方。所以我把我的CustomSignIn道具改为：

interface CustomProps extends HTMLAttributes<HTMLDivElement> {}

它将返回到默认的登录注册，而不是正确覆盖。但是如果我像这样把它包装在div中：

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

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

如果有人对我错过的任何文件有任何想法或了解，请告诉我。同样，这是使用@aws amplify/ui react包，而不是传统版本的aws amplify-react。

感谢

Answer 1

我已经测试过了，这应该可以工作。你需要把"；槽"；在标准HTML标记中。

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