Customize colors of withAuthenticator HOC component

问题

I am trying to customize the colors in withAuthenticator HOC aws-amplifier login screen.

I followed:

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

and also read:

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 still renders the AWS default look and feel. I doesn't make any difference what I put in myTheme, looks like as if it is ignored completely. Thanks for any feedback in advance.

回答1:

You need to adress the different elements like so:

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

If you are not sure about the names of the different elements you can look them up in the developer console of your browser. It´s a bit tedious but i haven´t found a documentation so far

回答2:

Taken from the documentation:

Web

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

<Authenticator theme={MyTheme} />

Web components reference

React Native

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

Since the question is about withAuthenticator specifically, the previous examples apply to that too:

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

来源：https://stackoverflow.com/questions/57464208/customize-colors-of-withauthenticator-hoc-component

标签

aws-amplify