How to disable Amplify from loading its Auth CSS theme file in a React app?

[j0b0sapi3n]

** Which Category is your question related to? **
Auth theme CSS files

** What AWS Services are you utilizing? **
aws-amplify-react within a React app

** Provide additional details e.g. code snippets **
I'm using Amplify in my React app. For Auth I don't use any of the provided UI and just use it programmatically through its provided state changes to interact with Cognito. I hide the default components and provide my own theme object (which basically sets everything to null).

<Authenticator hideDefault={true} onStateChange={this.handleAuthStateChange} theme={theme}>

However, I still see that even after I build my react app for production the CSS theme file that comes with Amplify Auth UI gets loaded in. How do I completely disable this CSS from being included? I'm trying to cut down my deployed file sizes as much as possible. Thanks!

[jordanranz]

Hey @j0b0sapi3n,

This is currently not possible to do but this seems like a necessary enhancement. I'll investigate how we can make this happen.

[jordanranz]

This will be a part of our UI Component refactor. I will keep this issue open so we can track this request.

[nypinstripes]

Hey @jordanranz also removing any !important flags, thanks.

[jordanranz]

FYI, we have started an RFC discussion for a proposed Amplify UI Component refactor to increase customizability and flexibility for our components. Please feel free to add any additional comments to the following issue:

#3279

[nagey]

Would be really great here if the imported styles avoided the use of global color variables that don't carry any sort of namespacing…

For example, a color named --amplifyGrey is a lot better than one named --grey

[thathurtabit]

Encouraging that this seems to be being worked on. Just being able to remove all CSS i.e. pass a theme={false} prop would save hours / days of tedious and confusing CSS overrides.

[tannerabread]

Closing as this should now be possible or will be handled in the UI repo. Theming is possible with the current React Authenticator component as shown here and Auth methods can be used directly without the supplied components as shown here