Question

我正在尝试使用Authenticator HOC aws放大器登录屏幕自定义颜色。

我关注了：

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

取自documentation：

网络

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

<Authenticator theme={MyTheme} />

Web components reference

反应原生

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 components reference

由于问题是关于withAuthenticator的，因此前面的示例也适用于此：

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

Answer 2

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

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 });

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

自定义withAuthenticator HOC组件的颜色

2 个答案: