Amplify UI is not working proper in React js

Question

I am using AWS amplify for user authentication. UI is not what expected but no problem with functionality.

Amplify dependencies

"dependencies": {
    "@aws-amplify/ui-react": "^2.1.4",
    "@testing-library/jest-dom": "^5.11.4",
    "@testing-library/react": "^11.1.0",
    "@testing-library/user-event": "^12.1.10",
    "aws-amplify": "^4.3.10",
    "react": "^17.0.2",
    "react-dom": "^17.0.2",
    "react-scripts": "4.0.3",
    "web-vitals": "^1.0.1"
  }

My app.js

import logo from "./logo.svg";
import "./App.css";
import Amplify from "aws-amplify";
import awsconfig from "./aws-exports";
import { withAuthenticator } from "@aws-amplify/ui-react";
Amplify.configure(awsconfig);

function App() {
  return (
    <div className="App">
      <header className="App-header">
        {/* <AmplifySignOut /> */}
        <h2>Amplify App</h2>
      </header>
    </div>
  );
}

export default withAuthenticator(App);

Answer 1

Add css import, this line before Amplify.configure.

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

This is breaking change of Amplify 3.x to 4.x.

Detail is written in this site.
https://github.com/aws-amplify/amplify-js/issues/5445

Answer 2

Latest version of Amplify supports below stylesheet

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

For more details visit Official AMPLIFY documents

Answer 3

I was getting this exact same issue. I went through the @aws-amplify files and it turns out that ui-react-v1 needed to be imported instead of the ui-react. Try importing the following line to get your styling to show correctly like the module example.

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

I hope this helps you out and anyone else getting this issue!