如何在React.js中设置阴影

如何在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];
JavaScript

创建React应用程序的步骤:

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

npx create-react-app boxshadow-project
JavaScript

步骤2:

在创建好项目文件夹(例如:boxshadow-project)之后,使用以下命令进行导航:

cd react-project
JavaScript

项目结构: 如下所示:

如何在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;
JavaScript

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; 
}
JavaScript

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

npm start
JavaScript

输出:

如何在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;
JavaScript

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; 
}
JavaScript

输出:

如何在React.js中设置阴影

Python教程

Java教程

Web教程

数据库教程

图形图像教程

大数据教程

开发工具教程

计算机教程

登录

注册