The different ways to style a React component.

There are many different ways through which one can style a React component. Some of the ways are :

• Inline Styling
  We can directly style an element using inline style attributes.
  Make sure the value of style is a JavaScript object:

class RandomComponent extends React.Component {
 render() {
   return (
     <div>
       <h3 style={{ color: "Yellow" }}>This is a heading</h3>
       <p style={{ fontSize: "32px" }}>This is a paragraph</p>
     </div>
   );
 }
}

• Using JavaScript object
  We can create a separate JavaScript object and set the desired style properties.
  This object can be used as the value of the inline style attribute.

class RandomComponent extends React.Component {
 paragraphStyles = {
   color: "Red",
   fontSize: "32px"
 };

 headingStyles = {
   color: "blue",
   fontSize: "48px"
 };

 render() {
   return (
     <div>
       <h3 style={this.headingStyles}>This is a heading</h3>
       <p style={this.paragraphStyles}>This is a paragraph</p>
     </div>
   );
 }
}

• CSS Stylesheet
  We can create a separate CSS file and write all the styles for the component inside that file. This file needs to be imported inside the component file.

import './RandomComponent.css';

class RandomComponent extends React.Component {
 render() {
   return (
     <div>
       <h3 className="heading">This is a heading</h3>
       <p className="paragraph">This is a paragraph</p>
     </div>
   );
 }
}

• CSS Modules
  We can create a separate CSS module and import this module inside our component. Create a file with “.module.css”‘ extension,styles.module.css:
  

.paragraph{
 color:"red";
 border:1px solid black;
}

We can import this file inside the component and use it:

import styles from  './styles.module.css';

class RandomComponent extends React.Component {
 render() {
   return (
     <div>
       <h3 className="heading">This is a heading</h3>
       <p className={styles.paragraph} >This is a paragraph</p>
     </div>
   );
 }
}