Search code examples
javascriptreactjsstyles

How to access to tag style with React.js

I want to change the background color by changing the page width by conditionally writing, but to do this I need to be able to access the styles

If we wanted to write this code in JavaScript, it would be like this:

document.getElementById("number1").style.backgroundColor="red";

But what if we want to write this code with React and functional method?

Solution

  • I would suggest you to do that with css code by simply using media-query.

    #number1 {
 @media screen and (min-width: _yourBreakpoint_) {
    background-color: "red";
  }
}

    Docs: https://www.w3schools.com/css/css3_mediaqueries_ex.asp

    However If you want to dynamically change the style via react you can use the style prop of the element. Supposing that the element is a div you can simply do:

    <div style={{ backgroundColor: width > breakpoint && "red" }}></div>

    Docs: https://reactjs.org/docs/dom-elements.html#style