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

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

Answer 2

摘自文档：

网络

const MyTheme = {
    signInButtonIcon: { 'display': 'none' },
    googleSignInButton: { 'backgroundColor': 'red', 'borderColor': 'red' }
}

<Authenticator theme={MyTheme} />

Web 组件参考

反应本机

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

const MySectionHeader = Object.assign({}, AmplifyTheme.sectionHeader, { background: 'orange' });
const MyTheme = Object.assign({}, AmplifyTheme, { sectionHeader: MySectionHeader });

<Authenticator theme={MyTheme} />

React Native 组件参考

由于问题是withAuthenticator具体的，前面的例子也适用于此：

export default withAuthenticator(App, false, [], null, MyTheme);