React - How to Set the CSS boxShadow

In this tutorial, we are going to learn about how to set the CSS box-shadow in React with the help of an example.

Consider, we have the following component in our react app:

import React from 'react';

function Home(){
    return (
        <div className="center">
         <h1>How are you</h1>
        </div>
    )
}

export default Home;

To set the css box-shadow in React, add the ‘boxShadow’ property with a value ‘1px 1px 1px #0000’ to the react element style prop.So, that it adds the boxShadow effect to the element.

Here is an example:

import React from "react";

function Home() {

  return (
        <div className="center">
          <h1 style={{boxShadow: "1px 1px 1px #0000"}}>How are you</h1>
       </div>
  );
}

export default Home;

In the example above, we have added a inline style {boxShadow: “1px 1px 1px #0000”} to the h1 element style property. So, that it adds the boxShadow effect to a ‘h1’ element.

Alternatively, we can change the text color using the css classes instead of inline styles.

Here is an example:

import React from "react";
import './home.css';

function Home() {

  return (
        <div className="center">
          <h1 className="box">How are you</h1>
       </div>
  );
}

export default Home;

home.css file:

.box{
    box-shadow: 1px 1px 1px #0000;
    padding: 1rem
}