How can I add styling to an element in React?

In normal JavaScript you can grab an element by its id and add a style to it.
For example:

var element = document.getElementById("myElement");
element.style.backgroundColor = "#f5f5f5";

My question is how you can do this in react. Is it even possible to add this style?
In react im using onChange in a function outside the render(). I looked at the React DOM for styling and tried but since styling is in different function it will tell me how the variable is undefined.
this is my code:

ChangeImage() {
        var imgStyles = {
            backgroundColor: '#000',
            padding: 5,
        }
    }

    render() {
        return (
            <div className="class">
                <div className="img-surround">
                <img 
                    src={this.state.file} 
                    id="img" 
                     style={imgStyles}/>
                </div>

Everything is working except styles and I even tried putting in different functions

44 thoughts on “How can I add styling to an element in React?”

Leave a Comment