Login form implemented with Amplify is not applied styling

Question

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.

Answer 1

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

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

Answer 2

In your app.js add the following inport

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