CSS stylesheets missing when using withAuthenticator from the aws-amplify-react package version 4.1.7

Describe the bug CSS stylesheets missing when using withAuthenticator from the aws-amplify-react package version 4.1.7

To Reproduce Steps to reproduce the behavior:

1. npx create-react-app my-app && cd my-app
2. npm i aws-amplify aws-amplify-reac@4.1.7
3. Configure:

import { withAuthenticator } from 'aws-amplify-react';
import Amplify, { Auth } from 'aws-amplify';
import awsconfig from './aws-exports';
Amplify.configure(awsconfig);

1. Wrap React App component with withAuthenticator

export default withAuthenticator(App);

1. npm run start
2. Open http://localhost:3000/

Expected behavior Full blown AWS login UI appears.

Instead just pure HTML appears.

Screenshots Expected:

Actual:

Environment

$ npx envinfo --system --binaries --browsers --npmPackages --npmGlobalPackages
npx: installed 1 in 0.925s

  System:
    OS: macOS 10.15.3
    CPU: (8) x64 Intel(R) Core(TM) i7-7700K CPU @ 4.20GHz
    Memory: 1.13 GB / 64.00 GB
    Shell: 3.2.57 - /bin/bash
  Binaries:
    Node: 12.16.2 - /opt/local/bin/node
    npm: 6.14.4 - /opt/local/bin/npm
  Browsers:
    Brave Browser: 80.1.5.112
    Chrome: 81.0.4044.113
    Firefox: 74.0.1
    Safari: 13.0.5
  npmPackages:
    @testing-library/jest-dom: ^5.5.0 => 5.5.0 
    @testing-library/react: ^10.0.2 => 10.0.2 
    @testing-library/user-event: ^10.0.2 => 10.0.2 
    aws-amplify: ^3.0.8 => 3.0.8 
    aws-amplify-react: ^4.1.7 => 4.1.7 
    react: ^16.13.1 => 16.13.1 
    react-dom: ^16.13.1 => 16.13.1 
    react-scripts: 3.4.1 => 3.4.1 
  npmGlobalPackages:
    aws-cdk: 1.31.0
    gatsby-cli: 2.11.4
    generator-cosappsync: 0.9.0
    npm-check-updates: 4.1.2
    npm: 6.14.4
    surge: 0.21.3
    yo: 3.1.1

Additional context Not sure with what specific version did this issue appear the first time.

When I install aws-amplify-react version 3.1.9 in the same project, the UI appears as expected.

[ashika01]

@matyashlavacek As of aws-amplify-react@4.x.x, the Authenticator is not styled. To include default styling in JavaScript, add this line before Amplify.configure:

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

Are you doing this? Its probably what you are missing

Its in the docs https://aws-amplify.github.io/docs/js/react#add-auth under auth for react.

[matyashlavacek]

@matyashlavacek As of aws-amplify-react@4.x.x, the Authenticator is not styled. To include default styling in JavaScript, add this line before Amplify.configure:

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

Are you doing this? Its probably what you are missing

Its in the docs https://aws-amplify.github.io/docs/js/react#add-auth under auth for react.

Ah I see, I was using aws-amplify-react@3.x.x before, which had the CSS included. I found out about the withAuthenticator HOC in the same place in the docs as @rrrix did. It would be nice to include it into these docs too indeed. Thanks for the info! @ashika01