Styles in JSX

"Mike, all of the things that we did today are very cool. When do we start adding styles? How can I make this page look pretty? Right now it's a bit dull." Shawn asked.

"Ah, right. Let's do that. React allows us to pass styles to the components the same way props can be passed. For example, we want our headings to be of the floral white color and maybe we want to change the font size. We will represent it in a typical CSS way as follows:"

background-color: 'FloralWhite',
font-size: '19px';

"We can represent this as a JavaScript object in the CamelCase fashion."

    var headingStyle = { backgroundColor: 'FloralWhite',
                         fontSize: '19px' 
                       };

Then, we can use it in each Heading component as a JavaScript object."

RecentChangesTable.Heading = React.createClass({
  render: function() {
    var headingStyle = { backgroundColor: 'FloralWhite',
                         fontSize: '19px' };
    return(<th style={headingStyle}>{this.props.heading}</th>);
  }
});

"Similarly, let's change the rows to have their own styles."

  RecentChangesTable.Row = React.createClass({
  render: function() {
  var trStyle = { backgroundColor: 'aliceblue' };
    return <tr style={trStyle}>
                <td>{this.props.changeSet.when}</td>
                <td>{this.props.changeSet.who}</td>
                <td>{this.props.changeSet.description}</td>
            </tr>;
  }
});

"We now have some shiny new headings and rows sprinkled by CSS styling" Mike added.

"Nice. The name of the attribute to pass these styles must be 'style', right?" Shawn asked.

"Yes. Also the keys of this style object need to be CamelCased, for example, backgroundColor, backgroundImage, fontSize, and so on."

"Mike, I understood the inline styling, however, how to add the CSS classes?"

"Ah right. We can pass the class name as an attribute to the DOM tags. Let's extract the styling to a new recentChangesTable CSS class."

// css
recentChangesTable {
  background-color: 'FloralWhite',
  font-size: '19px'
}

"Now, to apply this class to our component, all we need to do is pass it to the component using the expalined className prop."

render: function(){
    return <table className = 'recentChangesTable'>
             <Headings headings = {this.props.headings} />
             <Rows changeSets = {this.props.changeSets} />
           </table>;
    }
});

"As we have seen previously, React makes use of the CamelCase attributes. Here, the className prop will be converted to a normal class attribute when React renders the actual HTML."

<table class = 'recentChangesTable'> 
…
</table>

"We can also pass multiple classes to the className prop."

<table className = 'recentChangesTable userHeadings'>

"That's it! We can simply start using the styles freely in our components. This makes it trivial to integrate React with existing CSS styles."