Amplify-js: [Feedback]More Control over the styling.

[xxcheckmatexx]

Page: /ui/customization/customizing-css/q/framework/react

Feedback:

It is very difficult to remove the boxshadow of the authenticator, individual styling for the elements will be very uselful rather than changing css vars.

[mauerbac]

Thanks for the feedback @xxcheckmatexx ! Will move to the js-repo since this is closer to product feedback.

[jordanranz]

You are able to modify the box-shadow of the Authenticator by using:

amplify-authenticator {
  --box-shadow: 0;
}

There are also:

  --width
  --min-width
  --border-radius
  --padding
  --margin-bottom

As these were added pretty recently, we are working on auto-documenting the css API on the Authenticator docs page. Thanks for the feedback!

[elorzafe]

I am closing this issue and leaving in this repo so other can see the response here.

I will create an issue on docs repo that will point to this one

[xxcheckmatexx]

You are able to modify the box-shadow of the Authenticator by using:

amplify-authenticator {
  --box-shadow: 0;
}

There are also:

  --width
  --min-width
  --border-radius
  --padding
  --margin-bottom

As these were added pretty recently, we are working on auto-documenting the css API on the Authenticator docs page. Thanks for the feedback!

Thank you for this :)
I've used this https://aws-amplify.github.io/amplify-js/api/classes/authclass.html with formik for more control of styles for now .