ReactJS：为什么 .scss 没有正确引用 id 中的 className？答案

【问题标题】：ReactJS: Why isn't className within id being referenced correctly for .scss?ReactJS：为什么 .scss 没有正确引用 id 中的 className？
【发布时间】：2017-01-24 09:49:28
【问题描述】：

我为这样的组件设置了一个 scss 文件：

#footer {
  background-color: white;
  z-index: 100;
  display: flex;
  position: absolute;
  left: 0;
  bottom: 0;
  height: 100px;
  width: 100%;

  .image-one {
    width: 50;
    height: 50;
  }
}

在我的组件中：

  render(){

    return(
      <footer id="footer">
        <img
          className="image-one"
          src="/files/img/imageOne.png"
        />
      </footer>
    )
  }

scss 正确引用了页脚，但 className="image-one" 未正确引用。图像一没有变化。我做得对吗？

谢谢

编辑

填充前：

填充后 - 出现滚动条：

【问题讨论】：

如果你从#footer { ... } 中取出.image-one 会发生什么？它是否正确应用了 css？

标签： javascript html css reactjs sass

【解决方案1】：

您应该为您的 css/scss/sass 文件中的值定义一个单位 (px / em / %)。以下应该工作......

问题在于您的scss 而不是react。

#footer {
  background-color: white;
  z-index: 100;
  display: flex;
  position: absolute;
  left: 0;
  bottom: 0;
  height: 100px;
  width: 100%;
  background: red;
  padding: 15px;
  box-sizing: border-box;
}
.image-one {
    width: 50px;
    height: 50px;
  }

<script src="https://unpkg.com/babel-core@5.8.38/browser.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.1.0/react.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.1.0/react-dom.min.js"></script>
<div id="example"> </div>

<script type="text/babel">
ReactDOM.render(
        <footer id="footer">
        <img
          className="image-one"
          src="http://r.ddmcdn.com/s_f/o_1/cx_633/cy_0/cw_1725/ch_1725/w_720/APL/uploads/2014/11/too-cute-doggone-it-video-playlist.jpg"
        />
      </footer>,
        document.getElementById('example')
      );
</script>

【讨论】：

不敢相信我错过了。在我接受答案并投票之前，还有一个快速的问题。使用 px 我尝试做 padding: 15px; 但图像-one 滚动离开页面。
我想在页脚内做padding: 15px，而不是把图片推进去，它出去了，侧页滚动出现了。
box-sizing: border-box 什么都没做
检查您是否看过评论。告诉我
你能分享给我一个小提琴或一支笔，以便更好地理解它。谢谢！

【解决方案2】：

您错过了width 和height 课程image-one 的单元

【讨论】：