Login form implemented with Amplify is not applied styling

user_13287900 0
Viewed 1796

I asked same question in Japanese forum and no answer was returned so that I am asiking in this site.

This question is about AWS Amplify.

I am trying to implement login form with React and withAuthenticator() of Amplify in reference to a document of AWS(https://aws-amplify.github.io/docs/js/authentication) , but my login form is not like sample's UI of the document and css is not applied like this below image.

I can login and signup.

Is there anything to resolve this problem?

my login form made by withAuthenticator()

import Amplify from 'aws-amplify';
import awsconfig from './aws-exports';
import { withAuthenticator } from 'aws-amplify-react';

Amplify.configure(awsconfig);

function App() {
  return (

  );
}

export default withAuthenticator(App);

I cleared cache but not working.

Also there are no errors in the development tool of Chrome.

Sorry for my poor english.

aws-amplify reactjs amazon-web-services
4 Answers

Try using @aws-amplify/ui-react instead of aws-amplify-react.

import { withAuthenticator } from '@aws-amplify/ui-react';
user_119866470

In your app.js add the following inport

import '@aws-amplify/ui/dist/style.css';
user_28898950

I was missing this import

import '@aws-amplify/ui-react/styles.css';
user_45654050

Only this one worked for me:

import '@aws-amplify/ui-react/styles.css';
user_93021600
Related