1

我正在使用 @aws-amplify/ui-react 包进行身份验证。

我想覆盖它附带的一些 CSS 类。该包大量使用 CSS 变量，但我无法覆盖它们。

例如，我想为按钮添加添加边框半径。我尝试覆盖 CSS 文件中的 .button 类，但它没有生效。

以下是 DOM 的样子。 在此处输入图像描述

我尝试执行以下 CSS，但似乎不起作用。

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

.button{
    border-radius: 6px;
}

任何线索如何实现这一目标？

4

1 回答 1

1

那是因为它使用 a shadow DOM，您不能通过更改 css 直接覆盖元素/样式，您需要将 css 注入到 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');

另一种选择是，如果您使用的组件公开css path attribute，或者css variables然后您可以将它们设置在您的style元素中。

从 github 库问题中，他们提到了这个问题，https://github.com/aws-amplify/amplify-js/issues/2471，这个示例解决方案：

@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

这将覆盖变量：amplify-font-family和amplify-primary-color。

于 2021-03-28T19:39:40.553 回答