8 Ways to Style React Components

React is a JavaScript library for building user interfaces. React makes it painless to create interactive UIs. Design simple views for each state in your application, and React will efficiently update and render just the right components when your data changes.

There are about eight different ways to styling React Js components, there names and explanations of some of them are mentioned below.

  1. Inline CSS
  2. Normal CSS
  3. CSS in JS
  4. Styled Components
  5. CSS module
  6. Sass & SCSS
  7. Less
  8. Stylable

Inline CSS: In inline styling basically we create objects of style. And render it inside the components in style attribute using the React technique to incorporate JavaScript variable inside the JSX (Using ‘{ }’ )

Example 1: This example illustrates how to use inline styling to style react components.

  • index.js:



    Javascript

    filter_none

    edit
    close

    play_arrow

    link
    brightness_4
    code

    import React from 'react'
    import ReactDOM from 'react-dom'
    import App from './App'
      
    ReactDOM.render(<App />, document.querySelector('#root'))

    chevron_right

    
    

  • App.js

    Javascript

    filter_none

    edit
    close

    play_arrow

    link
    brightness_4
    code

    import React, { Component } from 'react'
    import StudentList from './StudentList'
      
    const App = () => {
      return (
        <div>
          <StudentList
            name='Ashank' 
            classNo='X' 
            roll='05'
            addr='Kolkata, West Bengal'
          />
          <StudentList
            name='Samir' 
            classNo='Xi' 
            roll='09'
            addr='Jalpaiguri, West Bengal'
          />
          <StudentList
            name='Tusar' 
            classNo='Xii' 
            roll='02'
            addr='Howrah, West Bengal'
          />
          <StudentList
            name='Karishma' 
            classNo='ix' 
            roll='08'
            addr='Mednipur, West Bengal'
          />
        </div>
      )
    }
      
    export default App

    chevron_right

    
    

  • StudentList.js: It is a studentList component rendered by the App component. It displays details of each student.

    Javascript

    filter_none

    edit
    close

    play_arrow

    link
    brightness_4
    code

    import React, { Component } from 'react'
      
    class StudentList extends Component{
      render(){
        const {name, classNo, roll, addr} = this.props
        const ulStyle = {border: '2px solid green', width:'40%', listStyleType:'none'}
        const liStyle = {color : 'blue', fontSize:'23px'}
        return(
          <ul style={ulStyle}>
            <li style={liStyle}>Name : {name}</li>
            <li style={liStyle}>Class: {classNo}</li>
            <li style={liStyle}>Roll: {roll}</li>
            <li style={liStyle}>Address : {addr}</li>
          </ul>
        )
      }
    }
      
    export default StudentList

    chevron_right

    
    

  • Output:

    Styling using inline styles

Example 2:

  • index.js : 



    Javascript

    filter_none

    edit
    close

    play_arrow

    link
    brightness_4
    code

    import React from 'react'
    import ReactDOM from 'react-dom'
    import App from './App'
      
    ReactDOM.render(<App />, document.querySelector('#root'))

    chevron_right

    
    

  • App.js

    Javascript

    filter_none

    edit
    close

    play_arrow

    link
    brightness_4
    code

    import React from 'react';
    import Lottery from './Lottery'
      
    function App() {
      return (
        <div>
          <Lottery />
          <Lottery title='Mini Daily'/>
        </div>
      );
    }
      
    export default App;

    chevron_right

    
    

  • Ball.js: Ball component responsible to design each ball

    Javascript

    filter_none

    edit
    close

    play_arrow

    link
    brightness_4
    code

    import React, { Component } from 'react'
      
    class Ball extends Component{
      render(){
        const ballStyle = {
          backgroundColor: 'tomato',
          borderRadius: '50%',
          width:'3em',
          height:'2.25em',
          textAlign:'center',
          paddingTop: '0.75em',
          display:'inline-block',
          marginRight: '0.5em',
          marginTop: '1em',
          color:'white',
          fontWeight: 'bold',
          fontSize: '1.5em'
        }
        return(
          <div style={ballStyle}>
            {this.props.num}
          </div>
        
      }
    }
      
    export default Ball

    chevron_right

    
    

  • Lotery.js: Lottery component responsible to render a single lottery card consists of six ball components.

    Javascript

    filter_none

    edit
    close

    play_arrow

    link
    brightness_4
    code

    import React,{ Component } from 'react'
    import Ball from './Ball'
      
    class Lottery extends Component{
      static defaultProps = {
        title : 'lotto',
        numbers : [1,2,3,4,5,6]
      }
      
      render(){
        const loteryStyle={
          border: '2px solid grey',
          borderRadius: '10px',
          width:'40em',
          textAlign:'center',
          margin: '1em auto auto',
          padding: '1em 0 2em 0'
        }
        return(
          <div style={loteryStyle}>
            <h3>{this.props.title}</h3>
            <div>
              {this.props.numbers.map(n => (
                <Ball num={n} />
              ))}
            </div>
          </div>
        )
      }
    }
      
    export default Lottery

    chevron_right

    
    

  • Output:

    Inline Styling

Normal CSS: In the external CSS styling technique, we basically create an external CSS file for each component and do the required styling of classes. and use those class names inside the component. It is a convention that name of the external CSS file same as the name of the component with ‘.css’ extension. It is better if the name of the classes used, follow the format ‘componentName-context’ (here context signifies where we use this classname). For example, if we style the header of a component called ‘Box’, a better classname should style this element should be ‘Box-header’.

Example: This example illustrates how to style react components with external stylesheets.



  • index.js:

    Javascript

    filter_none

    edit
    close

    play_arrow

    link
    brightness_4
    code

    import React from 'react'
    import ReactDOM from 'react-dom'
    import App from './App'
      
    ReactDOM.render(<App />, document.querySelector('#root'))

    chevron_right

    
    

  • App.js :

    Javascript

    filter_none

    edit
    close

    play_arrow

    link
    brightness_4
    code

    import React, { Component } from 'react'
    import StudentList from './StudentList'
      
    const App = () => {
      return (
        <div>
          <StudentList
            name='Ashank' 
            classNo='X' 
            roll='05'
            addr='Kolkata, West Bengal'
          />
          <StudentList
            name='Samir' 
            classNo='Xi' 
            roll='09'
            addr='Jalpaiguri, West Bengal'
          />
          <StudentList
            name='Tusar' 
            classNo='Xii' 
            roll='02'
            addr='Howrah, West Bengal'
          />
          <StudentList
            name='Karishma' 
            classNo='ix' 
            roll='08'
            addr='Mednipur, West Bengal'
          />
        </div>
      )
    }
      
    export default App

    chevron_right

    
    

  • StudentList.js: It is a studentList component rendered by the App component. It displays details of each student.

    Javascript

    filter_none

    edit
    close

    play_arrow

    link
    brightness_4
    code

    import React, { Component } from 'react'
      
    class StudentList extends Component{
      render(){
        const {name, classNo, roll, addr} = this.props
        return(
          <ul className='StudentList'>
            <li className='StudentList-details'>Name : {name}</li>
            <li className='StudentList-details'>Class: {classNo}</li>
            <li className='StudentList-details'>Roll: {roll}</li>
            <li className='StudentList-details'>Address : {addr}</li>
          </ul>
        )
      }
    }
      
    export default StudentList

    chevron_right

    
    

  • StudentList.CSS: Since there is no place to add CSS code externally, Here I add a screenshot of the CSS code.

    CSS

    filter_none

    edit
    close

    play_arrow

    link
    brightness_4
    code

    .StudentList{
        border: 2px solid green;
        width: 40%:
        list-style-type: none;
        }
      
    .StidentList-details{
        color: blue;
        font-size: 23px;
        }

    chevron_right

    
    

  • Output:

    External CSS styling

CSS in JS: The’react-jss’ integrates JSS with react app to style components. It helps to write CSS with Javascript and allows us to describe styles in a more descriptive way. It uses javascript objects to describe styles in a declarative way using ‘createUseStyles’ method of react-jss and incorporate those styles in functional components using className attribute.



Command to install third-party react-jss package

npm install react-jss

Example :

  • index.js:

    Javascript

    filter_none

    edit
    close

    play_arrow

    link
    brightness_4
    code

    import React from 'react'
    import ReactDOM from 'react-dom'
    import App from './App'
      
    ReactDOM.render(<App />, document.querySelector('#root'))

    chevron_right

    
    

  • App.js

    Javascript

    filter_none

    edit
    close

    play_arrow

    link
    brightness_4
    code

    import React, { Component } from 'react'
    import StudentList from './StudentList'
      
    const App = () => {
      return (
        <div>
          <StudentList
            name='Ashank' 
            classNo='X' 
            roll='05'
            addr='Kolkata, West Bengal'
          />
          <StudentList
            name='Samir' 
            classNo='Xi' 
            roll='09'
            addr='Jalpaiguri, West Bengal'
          />
          <StudentList
            name='Tusar' 
            classNo='Xii' 
            roll='02'
            addr='Howrah, West Bengal'
          />
          <StudentList
            name='Karishma' 
            classNo='ix' 
            roll='08'
            addr='Mednipur, West Bengal'
          />
        </div>
      )
    }
      
    export default App

    chevron_right

    
    

  • StudentList.js: It is a studentList component rendered by the App component. It displays the details of each student.

    Javascript

    filter_none

    edit
    close

    play_arrow

    link
    brightness_4
    code

    import React, { Component } from 'react'
    import {createUseStyles} from 'react-jss'
      
    const styles = createUseStyles({
      student : {
        border : '2px solid green',
        width: '40%',
        listStyleType:'none'
      },
      
      studentDetails : {
        color : 'blue',
        fontSize : '23px'
      }
    })
      
    const StudentList = (props) => {
      const classes = styles()
      const {name, classNo, roll, addr} = props
      return(
        <ul className={classes.student}>
          <li className={classes.studentDetails}>Name : {name}</li>
          <li className={classes.studentDetails}>Class: {classNo}</li>
          <li className={classes.studentDetails}>Roll: {roll}</li>
          <li className={classes.studentDetails}>Address : {addr}</li>
        </ul>
      )
    }
      
    export default StudentList

    chevron_right

    
    

  • Output:

    Styling with CSS in JS

Styled Components: The styled-components allows us to style the CSS under the variable created in JavaScript. style components is a third party package using which we can create a component as a JavaScript variable that is already styled with CSS code and used that styled component in our main component. styled-components allow us to create custom reusable components which can be less of a hassle to maintain.



Command to install third-party styled-components package

npm install --save styled-components

Example:

  • index.js:

    Javascript

    filter_none

    edit
    close

    play_arrow

    link
    brightness_4
    code

    import React from 'react'
    import ReactDOM from 'react-dom'
    import App from './App'
      
    ReactDOM.render(<App />, document.querySelector('#root'))

    chevron_right

    
    

  • App.js

    Javascript

    filter_none

    edit
    close

    play_arrow

    link
    brightness_4
    code

    import React, { Component } from 'react'
    import StudentList from './StudentList'
      
    const App = () => {
      return (
        <div>
          <StudentList
            name='Ashank' 
            classNo='X' 
            roll='05'
            addr='Kolkata, West Bengal'
          />
          <StudentList
            name='Samir' 
            classNo='Xi' 
            roll='09'
            addr='Jalpaiguri, West Bengal'
          />
          <StudentList
            name='Tusar' 
            classNo='Xii' 
            roll='02'
            addr='Howrah, West Bengal'
          />
          <StudentList
            name='Karishma' 
            classNo='ix' 
            roll='08'
            addr='Mednipur, West Bengal'
          />
        </div>
      )
    }
      
    export default App

    chevron_right

    
    

  • StudentList.js: It is a studentList component rendered by the App component. It displays details of each student.

    Javascript

    filter_none

    edit
    close

    play_arrow

    link
    brightness_4
    code

    import React, { Component } from 'react'
    import styled from 'styled-components'
      
    //styled component Li
    const Li = styled.li`
      color : blue;
      font-size : 23px
    `
      
    //Styled component Ul
    const Ul = styled.ul`
      border : 2px solid green;
      width: 40%;
      list-style-type:none
    `
      
    const StudentList = (props) => {
      const {name, classNo, roll, addr} = props
      return(
        <Ul> 
          <Li>Name : {name}</Li>
          <Li>Class: {classNo}</Li>
          <Li>Roll: {roll}</Li>
          <Li>Address : {addr}</Li>
        </Ul>
      )
    }
      
    export default StudentList

    chevron_right

    
    

  • Output :

    Styling with styled components

CSS Modules: A CSS module is a simple CSS file but a key difference is by default when it is imported every class name and animation inside the CSS module is scoped locally to the component that is importing it also CSS file name should follow the format ‘filename.module.css’. This allows us to use a valid name for CSS classes without worrying about conflicts with other class names in your application.



To use CSS modules create a normal CSS file, import the module you have created from within your component using the syntax

import styles from './filename.module.css

Example :

  • ndex.js:

    Javascript

    filter_none

    edit
    close

    play_arrow

    link
    brightness_4
    code

    import React from 'react'
    import ReactDOM from 'react-dom'
    import App from './App'
      
    ReactDOM.render(<App />, document.querySelector('#root'))

    chevron_right

    
    

  • App.js

    Javascript

    filter_none

    edit
    close

    play_arrow

    link
    brightness_4
    code

    import React, { Component } from 'react'
    import StudentList from './StudentList'
      
    const App = () => {
      return (
        <div>
          <StudentList
            name='Ashank' 
            classNo='X' 
            roll='05'
            addr='Kolkata, West Bengal'
          />
          <StudentList
            name='Samir' 
            classNo='Xi' 
            roll='09'
            addr='Jalpaiguri, West Bengal'
          />
          <StudentList
            name='Tusar' 
            classNo='Xii' 
            roll='02'
            addr='Howrah, West Bengal'
          />
          <StudentList
            name='Karishma' 
            classNo='ix' 
            roll='08'
            addr='Mednipur, West Bengal'
          />
        </div>
      )
    }
      
    export default App

    chevron_right

    
    

  • StudentList.js :

    Javascript

    filter_none

    edit
    close

    play_arrow

    link
    brightness_4
    code

    import React, { Component } from 'react'
    import style from './StudentList.module.css'
      
    const StudentList = (props) => {
      const {name, classNo, roll, addr} = props
      return(
        <ul className={style.list}> 
          <li className={style.details}>Name : {name}</li>
          <li className={style.details}>Class: {classNo}</li>
          <li className={style.details}>Roll: {roll}</li>
          <li className={style.details}>Address : {addr}</li>
        </ul>
      )
    }
      
    export default StudentList

    chevron_right

    
    

  • StudentList.module.css: Since there is no place to add CSS code externally, Here I add a screenshot of the CSS code.

    CSS



    filter_none

    edit
    close

    play_arrow

    link
    brightness_4
    code

    .list{
        border: 2px solid green;
        width: 40%:
        list-style-type: none;
        }
      
    .details{
        color: blue;
        font-size: 23px;
        }

    chevron_right

    
    

  • Output :

    Styling with CSS modules

Sass and SCSS: Sass is the most stable, powerful, professional-grade CSS extension language. It’s a CSS preprocessor that adds special features such as variables, nested rules, and mixins or syntactic sugar in regular CSS. The aim is to make the coding process simpler and more efficient.

How to use Sass :

  • Install node-sass using the command
npm install node-sass
  • Change .CSS file to .SCSS file
  • Change any imports to use .SCSS

Example:

  • index.js :

    Javascript

    filter_none

    edit
    close

    play_arrow

    link
    brightness_4
    code

    import React from 'react'
    import ReactDOM from 'react-dom'
    import App from './App'
      
    ReactDOM.render(<App />, document.querySelector('#root'))

    chevron_right

    
    

  • App.js :

    Javascript

    filter_none

    edit
    close

    play_arrow

    link
    brightness_4
    code

    import React, { Component } from 'react'
    import StudentList from './StudentList'
      
    const App = () => {
      return (
        <div>
          <StudentList
            name='Ashank' 
            classNo='X' 
            roll='05'
            addr='Kolkata, West Bengal'
          />
          <StudentList
            name='Samir' 
            classNo='Xi' 
            roll='09'
            addr='Jalpaiguri, West Bengal'
          />
          <StudentList
            name='Tusar' 
            classNo='Xii' 
            roll='02'
            addr='Howrah, West Bengal'
          />
          <StudentList
            name='Karishma' 
            classNo='ix' 
            roll='08'
            addr='Mednipur, West Bengal'
          />
        </div>
      )
    }
      
    export default App

    chevron_right

    
    

  • StudentList.js :

    Javascript

    filter_none

    edit
    close

    play_arrow

    link
    brightness_4
    code

    import React, { Component } from 'react'
    import './StudentList.scss'
      
    const StudentList = (props) => {
      const {name, classNo, roll, addr} = props
      return(
        <ul className='list'
          <li className='details'>Name : {name}</li>
          <li className='details'>Class: {classNo}</li>
          <li className='details'>Roll: {roll}</li>
          <li className='details'>Address : {addr}</li>
        </ul>
      )
    }
      
    export default StudentList

    chevron_right

    
    

  • StudentList.scss : Since there is no place to add CSS code externally, Here I add a screenshot of the CSS code.

    CSS

    filter_none

    edit
    close

    play_arrow

    link
    brightness_4
    code

    &blue-shade: #264BC4;
    &pale-green-color: #3CC27F;
      
    .list{
        border: 2px solid &pale-green-color;
        width: 40%:
        list-style-type: none;
        }
      
    .details{
        color: &blue-shade;
        font-size: 23px;
        }

    chevron_right

    
    

  • Output :

    Styling using Sass

react-js-img




My Personal Notes arrow_drop_up

Check out this Author's contributed articles.

If you like GeeksforGeeks and would like to contribute, you can also write an article using contribute.geeksforgeeks.org or mail your article to contribute@geeksforgeeks.org. See your article appearing on the GeeksforGeeks main page and help other Geeks.

Please Improve this article if you find anything incorrect by clicking on the "Improve Article" button below.


Article Tags :

Be the First to upvote.


Please write to us at contribute@geeksforgeeks.org to report any issue with the above content.