Vuejs Nuxt -如何修改facebook登录按钮样式？

Question

我是Vuejs和Nuxt的新人。我使用的是一个库facebook-login-vuejs，它可以工作，但我需要一点修改，比如调整按钮的宽度。我试图在这个组件中提供一个"fbutton“类：

<facebook-login
    class="button fbbutton"
    appId="102023513468xxx"
    loginLabel="Facebook"
    @login="fbOnLogin"
    @logout="fbOnLogout"
></facebook-login>

下面是我的CSS：

.fbbutton button{
 width: 100px;}

但一切都不会改变

here in this picture, the width doesn't change. Seems like set by facebook

this one also, the button still out of the container

请任何人能帮我解决这个问题，谢谢

Answer 1

查看the facebook-login-vuejs source code，你会清楚地看到“html结构”。

您需要覆盖“默认”css规则。

.facebook-login button {
  border: none;
  color: #fff;
  position: relative;
  line-height: 34px;
  min-width: 225px;
  padding: 0 15px 0px 46px;
  background-image: linear-gradient(#4c69ba, #3b55a0);
}