aws-amplify - 自定义 withAuthenticator HOC 组件的颜色

Question

我正在尝试自定义 withAuthenticator HOC aws-amplifier 登录屏幕中的颜色。

我关注了:

https://aws-amplify.github.io/docs/js/authentication#using-components-in-react

同时阅读:

https://medium.com/@coryschimmoeller/customizing-the-authentication-experience-of-amplifys-withauthenticator-e6f2089ff469

import { AmplifyTheme } from 'aws-amplify-react';


const myTheme = {
    ...AmplifyTheme,
    BackgroundColor: { color: 'blue',backgroundColor: 'blue' },
    button: { color: 'blue',backgroundColor: 'blue' },
    amazonSignInButton: { color: 'blue',backgroundColor: 'blue' },
    signInButton: { backgroundColor: 'blue' , color: 'blue'}
};

...

//export default App;
export default withAuthenticator(App, myTheme );

amplify 仍然呈现 AWS 默认外观。我放在 myTheme 中的内容没有任何区别，看起来好像它被完全忽略了。感谢您提前提供任何反馈。

Answer 1

您需要像这样处理不同的元素:

import { AmplifyTheme } from "aws-amplify-react";

const authTheme = {
  ...AmplifyTheme,
  sectionHeader:{
    ...AmplifyTheme.sectionHeader,
    color:"red",
  },
  formSection: {
    ...AmplifyTheme.formSection,
    backgroundColor: "green",
  },
  sectionFooter: {
    ...AmplifyTheme.sectionFooter,
    backgroundColor: "purple"
  },
  button: {
      ...AmplifyTheme.button,
      backgroundColor: "blue"
  }
}

export default withAuthenticator(App, { theme: authTheme });

如果您不确定不同元素的名称，可以在浏览器的开发人员控制台中查找它们。这有点乏味，但到目前为止我还没有找到文档