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

Question

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

  render(){

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

在我的组件中：

className="image-one"

scss正确引用了页脚，但from traits.api import HasTraits, List, Int, Instance, on_trait_change class A(HasTraits): value = Int(0) class B(HasTraits): lst = List(Instance(A,())) @on_trait_change('lst[]') def _update(self): print('changed') 没有。图像没有变化。我做得对吗？

谢谢

修改

填充前：

填充后 - 显示滚动条：

Answer 1

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

问题是scss而不是react。

＆＃13;

＆＃13;

#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;
  }

＆＃13;

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

＆＃13;

＆＃13;

＆＃13;

Answer 2

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

的单元