[React] Intro to inline styles in React components

React lets you use "inline styles" to style your components; inline styles in React are just JavaScript objects that you can render in an element's style attribute. The properties of these style objects are just like the CSS property, but they are camel case (borderRadius) instead of kebab-case (border-radius). React inline styles allow you to use all the JavaScript you know and love like variables, loops, ES6 modules etc. with your styles. React then renders these properties as inline styles in the output HTML, which means that styles are scoped to the component itself - no more cascading issues or trying to figure out how to re-use a component...everything that belongs to a component is self contained with the component!

 

/*main.js*/
import React from 'react';
import Example from './example';

React.render(<Example content="Button"/>, document.body);

 

/*example.js*/

import React, {Component} from 'react';
import styles from './styles/styles';

class Example extends Component {
    render() {
        return (
            <p style={styles}>{this.props.content} Hello</p>
        );
    }
}

Example.propTypes = {
    content: React.PropTypes.string.isRequired
};

export default Example;

 

styles.js

const baseColor = '#4D54D8';
const borderColor = "#080E73";
const fontColor = "white";

var styles = {
    color: `${fontColor}`,
    background: `${baseColor}`,
    borderRadius: '1rem',
    border: `1px solid ${borderColor}`,
    width: '150px',
    height: '30px',
    fontSize: '1rem',
    textAlign: 'center'
};

export default styles;