Adding style stored in a variable inside React class

Question

I'm trying to use some style inside my React class. I have done it before doing:

<div style={{background: "red"}}></div>

I want to use a variable instead, for example:

<div style={divStyle}></div>

My code looks like:

class HolaMundo extends React.Component {
  const divStyle = {
    color: 'blue',
  };
  render() {
    return(
      <div className="container" style={divStyle}> 
        <h1> Hola {this.props.name}</h1>
      </div>
    );
  }
}

ReactDOM.render(<HolaMundo name="One" />, document.getElementById("app"));

But the styles are not applied. How can I achieve this?

I don't know what is going on, I'm working on codepen and is not recognizing the styles :( — Fidel Castro
– Fidel Castro, Commented Feb 15, 2017 at 21:41

Andrew Li · Accepted Answer · 2017-02-15 22:32:53Z

25

You can't define a constant in the middle of a class, that's invalid syntax. Class bodies, by definition¹, can only contain method definitions, static method definitions, and empty statements (;)². Define the divStyle inside a method:

class HolaMundo extends React.Component {
    render() {
        const divStyle = {
            color: 'blue',
        };

        return (
          <div className="container" style={divStyle}> 
            <h1>Hola {this.props.name}</h1>
          </div>
        );
    }
}

¹Per the ECMAScript 2015 Language Specification, Section 14.5 - Class Definitions

²Babel currently supports class properties (with plugins). You can also assign an instance variable through the constructor, with this.style = { ... } and access it anywhere in the class with this.style.

edited Feb 15, 2017 at 22:32

answered Feb 15, 2017 at 21:40

Andrew Li

58.1k14 gold badges135 silver badges150 bronze badges

Sign up to request clarification or add additional context in comments.

3 Comments

Fidel Castro Over a year ago

Thank you it works now :), The thing is that it wasn't printing any errors on the console ( im working on codepen)

Fidel Castro Over a year ago

and does it make any difference if i do it the way you showed me or any the bottom of the page?

Andrew Li Over a year ago

@FidelCastro Codepen may be suppressing errors. If you declare the constant outside of the class, it's okay, but I'd recommend declaring a variable at the narrowest scope possible. If there's no need to declare it outside the class, I wouldn't.

isherwood · Accepted Answer · 2019-09-05 20:44:14Z

5

At the bottom of the page (below the class declaration) you can define a styles object:

 const styles = {
  exampleStyle: {
    backgroundColor: 'red',
  }
};

then pass it into a components style prop:

style={styles.exampleStyle}

I prefer doing it like this as you can then keep all your styles for the component in one object rather than having a styles object for each of your methods in the class.

edited Sep 5, 2019 at 20:44

isherwood

61.4k16 gold badges122 silver badges173 bronze badges

answered Feb 15, 2017 at 21:40

LuckyLukas

4852 gold badges7 silver badges18 bronze badges

Collectives™ on Stack Overflow

Adding style stored in a variable inside React class

2 Answers 2

3 Comments

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

3 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related