Discussion on: How I redid the DEV badge using Font Awesome [updated]

[Sergiu Mureşan]

I'm not too familiar with JSX and React so I don't understand why do you create an object to represent the style instead of using it inline. From this:

  <span className="fa-layers-text" style={{ 
    fontFamily: "Joystick", 
    fontSize: "0.6em", 
    color: "white", 
    padding: "2px 0 0 2px"
  }}>DEV</span>

to this:

  <span className="fa-layers-text" style="
     font-family: Joystick; 
     font-size: 0.6em; 
     color: white; 
     padding: 2px 0 0 2px;"
  >DEV</span>

Does react or JSX do something special when it sees the style param like that?

[Tiago Romero Garcia]

Hi @codevault , the traditional approach of defining styles is simply not supported in JSX. The official reason is: this is consistent with the DOM style JavaScript property, is more efficient, and prevents XSS security holes.

So the external pair of curly braces is to indicate this is going to be read from a JSX variable, and the internal pair of curly braces is because it's a JS object.

Source: reactjs.org/docs/dom-elements.html...