Zocialcss CSS按钮背景变为白色。

Question

我正在尝试在我的网站中加入ZocialCSS按钮，但是当我插入它们时，背景的颜色会自动更改为白色，而不是保留其余按钮的默认颜色。

<div className="form-group">
    <div className="col-sm-offset-2 zocial facebook">
        <button class="zocial facebook">
        Sign in with Facebook
        </button>
    </div>      
</div>

我在JSFiddle：http://jsfiddle.net/Bc6Et/工作，但在我的计算机中，类部分被忽略，所以我只得到一个简单的HTML按钮。

以下是我在zocial facebook部分内撰写className时的样子：

每个人都说我应该使用class代替className，但无论我在哪里替换它都会被忽略。有谁知道为什么？

其他评论

• 我正在使用React。
• 我有一个index.html文件，它调用一个js文件，其中包含一个带有上述HTML代码的render函数。

ANSWER 在className内加入button非常有效：

<div className="form-group">
     <div className="col-sm-offset-2">
           <button className="zocial facebook">
                 Log in with Facebook
           </button>
     </div>      
</div>

Answer 1

您需要CSS来影响<button>中的<div>。

此外，它应该是class而不是className

<div class="zocial facebook">
  <button>Log in with Facebook</button>
</div>

CSS：

.zocial.facebook button {
  background-color: #somecolor
}

或者简单地将同一个类放到按钮以及div：

<div class="zocial facebook">
  <button class="zocial facebook">Log in with Facebook</button>
</div>

Answer 2

首先你应该使用“class =”而不是“className =”

如果在更正后仍然导入背景颜色，您可以执行以下操作：

你可以通过添加元素样式来覆​​盖css

<div class="zocial facebook" style="background: none">

或

<div class="zocial facebook" style="background-color: rgba(0, 0, 0, 0);">

你也可以通过在样式标签

中定位来重写.zocial facebook的css

<style>
    .zocial facebook {background: none; background-color: rgba(0,0,0 0);}
</style>

Answer 3

ANSWER className button内的<div className="form-group"> <div className="col-sm-offset-2"> <button className="zocial facebook"> Log in with Facebook </button> </div> </div> 完美无缺：

{{1}}