Ly Maneug Ly Maneug - 2 months ago 11
React JSX Question

ReactJS: Why isn't className within id being referenced correctly for .scss?

I have an scss file set up for a component like so:

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


And in my component:

render(){

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


The footer is correctly referenced by the scss yet the
className="image-one"
is not. There is no change to the image-one. Am I doing it correctly?

Thank you

EDIT

Before padding:

enter image description here

After padding - Scroll bar appears:

enter image description here

Answer

You should define a unit (px / em / %) to the values in your css/scss/sass file. The following should work...

It's the problem with your scss not 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>