0 votes
in ReactJS by
What are the different ways to style a React component?

1 Answer

0 votes
by
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>

   );

 }

}

Related questions

0 votes
asked Dec 8, 2020 in ReactJS by SakshiSharma
0 votes
asked Mar 1, 2020 in ReactJS by RShastri
0 votes
asked Mar 3, 2020 in ReactJS by miceperry
...