如何在React.js中设置阴影

在本文中，我们将看一下 如何创建一个阴影 。CSS属性box-shadow用于在React中设置盒子阴影。这适用于任何React.js组件。CSS属性box-shadow可在元素的边框周围创建阴影效果，通过用逗号分隔它们，可以同时设置多种效果。盒子阴影由元素的X和Y偏移量、模糊和扩散半径以及颜色来定义。

React中的useState Hook 允许在函数组件中使用状态变量。通过将初始状态作为参数提供，该函数返回一个变量，该变量保存当前状态值（可能与初始状态不同），以及一个用于修改此值的函数。

语法：

box-shadow: [h offset] [v offset] [blur radius] 
[optional spread] [any color];

创建React应用程序的步骤：

步骤1： 使用此命令创建一个React应用程序

npx create-react-app boxshadow-project

步骤2：

在创建好项目文件夹（例如：boxshadow-project）之后，使用以下命令进行导航：

cd react-project

项目结构： 如下所示：

如何在React.js中设置阴影

步骤3： 打开 App.js文件 . 将源代码简单粘贴到App.js文件中。

示例1： 在这个示例中，App组件使用useState钩子函数创建了一个名为showBox的状态变量，初始值为false。handleClick函数在按钮点击时切换showBox的值。代码返回一个按钮，在点击时调用handleClick函数，以及一个内联条件渲染，如果showBox为true，则显示一个绿色的文本标题和一个带有“box”类名的div中的段落。

import React, { useState } from "react"; 
import "./App.css"; 
function App() { 
    const [showBox, setShowBox] = useState(false); 
  
    const handleClick = () => { 
        setShowBox(!showBox); 
    }; 
  
    return ( 
        <> 
            <button className="button" 
                onClick={handleClick}> 
                Box Shadow 
            </button> 
            {showBox && ( 
                <div className="box"> 
                    <h1 style={{ color: "green" }}> 
                        Welcome To Geeksforgeeks!! 
                    </h1> 
                    <p> 
                        <!-- Content goes here --> 
                    </p> 
                </div> 
            )} 
        </> 
    ); 
} 
  
export default App;

CSS

body { 
    margin: 1rem; 
} 
 
.button { 
    padding: 12px 24px; 
    background-color: green; 
    border-radius: 10px; 
    border: none; 
    color: #fff; 
    font-size: 16px; 
    cursor: pointer; 
    /* Box Shadow */
    box-shadow: 1px 1px 10px 1px grey; 
} 
 
.box { 
    border-radius: 10px; 
    margin-top: 1rem; 
    width: 50%; 
    height: 150px; 
    padding: 10px 10px 10px 10px; 
    background-color: #f5f5f5; 
    border: 1px solid #ccc; 
    /* Box Shadow */
    box-shadow: 1px 1px 10px 0px red; 
}

步骤5： 要运行该应用程序，请打开终端并输入下面列出的命令。转到 http://localhost:3000/ 以查看输出。

npm start

输出：

如何在React.js中设置阴影

示例2： 该示例与前一个示例相同，但区别在于前一个示例中，我们使用onclick函数在内容框上显示盒子阴影，而在这个示例中，我们使用:hover来显示盒子阴影。当用户悬停在盒子内容上时，将显示盒子阴影。要运行此代码，请按照先前提到的相同步骤操作。

import React from "react"; 
import "./App.css"; 
  
function App() { 
    return ( 
        <> 
            <div className="box"> 
                <h1 style={{ color: "green" }}> 
                    Welcome To Geeksforgeeks!! 
                </h1> 
                <p> 
                    A Computer Science portal for 
                    geeks. It contains well written,  
                    well thought and well explained  
                    computer science and programming  
                    articles 
                </p> 
            </div> 
        </> 
    ); 
} 
  
export default App;

CSS

body { 
    margin: 2rem; 
} 
  
.box { 
    border-radius: 10px; 
    margin-top: 1rem; 
    width: 50%; 
    height: 150px; 
    padding: 10px 10px 10px 10px; 
    background-color: #f5f5f5; 
    border: 1px solid #ccc; 
    transition: linear all 0.4s; 
    cursor: pointer; 
} 
  
/* Box shadow */
.box:hover { 
    box-shadow: 1px 1px 10px 0px red; 
}

输出：

如何在React.js中设置阴影