html - Zocial Css 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 按钮。

这是我在 className 部分编写 zocial facebook 时的样子的图片:

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

补充意见

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

回答在 button 中包含 className 效果很好:

<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>