问题描述
我正在使用@ aws-amplify / ui-react软件包进行身份验证。
我想重写一些附带的CSS类。该软件包大量使用CSS变量，但我无法覆盖它们。
例如，我要将添加边框半径添加到按钮。我尝试覆盖CSS文件中的.button类，但没有生效。
以下是DOM的外观。
我尝试执行以下CSS，但似乎无法正常工作。
amplify-button{
border-radius: 6px;
}
.button{
border-radius: 6px;
}
任何线索如何实现这一目标？
解决方法
那是因为它使用了Nlog，你不能通过改变css直接覆盖元素/样式，你需要将css注入到shadow DOM中
shadow DOM另一种选择是，如果您使用的组件公开 const style = document.createElement('style')
style.innerHTML = '.the-class-name { property-name: my-value; }'
host.shadowRoot.appendChild( style )
或 css path attribute，那么您可以在 css variables 元素中设置它们。
从 github 库问题，他们提到了这个问题，https://github.com/aws-amplify/amplify-js/issues/2471，有这个示例解决方案：
style哪些会覆盖变量：@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。