Override CSS in AWS Amplify React UI

Question

I am using @aws-amplify/ui-react package for Auth.

I want to override a few CSS classes that come with it. The package heavily uses the CSS variables but I am not able to override them.

For example, I want to add the add border-radius to the button. I tried overriding the .button class in CSS files but it is not taking effect.

Following is how the DOM looks like.

I tried doing the following CSS but it does not seem to work.

amplify-button{
    border-radius: 6px;
}

.button{
    border-radius: 6px;
}

Any clue how to achieve this?

Answer 1

That's because it is using a shadow DOM, you can't directly overwrite the elements/styles by changing the css, you'll need to inject the css into the shadow DOM

const style = document.createElement('style');
style.innerHTML = '.the-class-name { property-name: my-value; }';
host.shadowRoot.appendChild( style );
// The host is the parent component in your DOM that contains
// the shadow DOM element.
const host = document.getElementById('host');

Another alternative is if the component you are using exposes css path attribute or css variables and then you could set them in your style element.

From the github library issues, they mention this problem, https://github.com/aws-amplify/amplify-js/issues/2471, with this example solution:

@import '../css/app'

amplify-authenticator
    display: flex
    justify-content: center
    align-items: center
    height: 100vh
    font-family: 'Raleway', 'Open Sans', sans-serif
    min-width: 80vw
    padding: 10vmin

    @media only screen and (min-device-width: 700px)
        margin: auto
        padding: 15vmin
        min-width: 100%

    --amplify-font-family: $typography-font-family
    --amplify-primary-color: #FA3336

Which would override the variables: amplify-font-family and amplify-primary-color.