Adding styles to components

There are a number of ways we could improve the appearance of our components. Let's take the PageView component, for example. What would make it better? Perhaps if we increased the font size and used a sans serif font, the titles would be clearer to read. Perhaps we could increase the margin around each page.

There are a few different ways to style our components. The first is by adding styles inline to the render method in PageView:

render() {
    var rowStyle = this.props.rowStyle || {
        "fontSize": "18px",
        "fontFamily": "Helvetica"
    };

    var labelStyle = this.props.labelStyle || {
        "whiteSpace": "nowrap"
    };

    var buttonStyle = this.props.buttonStyle || {
        "margin": "0 0 0 10px",
        "verticalAlign": "middle",
    };

    return <div style={rowStyle}>
        <label style={labelStyle}>
            {this.props.title}
        </label>
        <button
            style={buttonStyle}
            onClick...