Amplify UI is not working proper in React js

user_3766168 0
Viewed 1155

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

enter image description here

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);
aws-amplify reactjs
3 Answers
user_100942630

Latest version of Amplify supports below stylesheet

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

For more details visit Official AMPLIFY documents

user_86098440

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!

user_66322630
Related