Inline styles example in React

There are different ways of adding styles to react components.
1. Inline styles.
2. CSS Stylesheet
3. CSS Modules

In this example we shall see on how to implement Inline styles in React components. The example uses styles defined in the same file as the react component and the style is applied to the component using className="<style name>"


import React, { Component } from 'react';
import ReactDOM from 'react-dom';
import HelloWorld from './HelloWorld.jsx';

const myStyle = {
  height: '200px',
  width: '200px',
  margin: '20px',
  border: '2px solid blue'
};

class StyleComponent extends Component {
  constructor(props) {
    super(props);
    this.state = {};
  }

  render() {
return (
  <div style={myStyle}> 
   <span>Hello Inline Styles</span>
  </div>
);
  }
}

ReactDOM.render(<StyleComponent />, document.getElementById('app'));

Output: