Inline styles without classes 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, without defining style classes. The style elements will be directly defined in the html tags of the react component, there will be no reference to inline or external style classes. This approach is a quick way to apply styles but not recommended for larger projects since the styles are not centralized but defined across the components making it difficult to modify and maintain.


import React, { Component } from 'react';
import ReactDOM from 'react-dom';

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

  render() {
return (
  <div style={{border: '2px solid green', height: '200px', width: '200px', margin: '10px'}}>   
   <span>Hello Inline Styles</span>
  </div>
);
  }
}

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