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

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.

CodePudding user response：

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

CodePudding user response：

You can use element.style to change css properties.

let element = document.getElementById('hi')
element.style.color = "white";
element.style.backgroundColor = "black";

<div id="hi">Hello</div>

CodePudding user response：

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