'How to change the style of an element retrieved from JS getelementbyid in react?

I'm trying to target an element in the the DOM that has already been returned, and rendered, by another component; I was hoping to use a getElementById() call, and then change the CSS of that element.

javascriptcssreactjs


Solution 1:[1]

Its bad idea to use getElementById in React. You can use style like this

<div style={{ height: 10 }}>
  Hello World!
</div>

Or give attribute className to your element and make styles for that class in css.

<div className="button" />

Solution 2:[2]

in the css file add #h1 { font-size: '12px'; } and in HTML file use this <div id="hi"></div>

Solution 3:[3]

You can use element.style to change css properties.

Edit : It seems that you shouldn't use getElementById with React.

let element = document.getElementById('hi')
element.style.color = "white";
element.style.backgroundColor = "black";
<div id="hi">Hello</div>

Sources

This article follows the attribution requirements of Stack Overflow and is licensed under CC BY-SA 3.0.

Source: Stack Overflow

Solution Source
Solution 1 Alexander
Solution 2 usama j
Solution 3

Related Questions