Amplify-js: 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