React.js蓝图HTML元素组件嵌套用法

React.js Blueprint 是一款前端UI工具包。它在构建复杂数据密集型桌面应用程序的界面方面非常优化和流行。

我们可以通过为父元素提供一个className {Classes.RUNNING_TEXT}，将样式和React.js Blueprint HTML元素组件的功能添加到HTML元素中，这将改变所有嵌套元素的样式。

语法:

<div className={Classes.RUNNING_TEXT}>
    ...
</div>

前提条件：

ReactJS的介绍和安装
React.js蓝图HTML元素组件
创建React应用程序和模块安装：

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

npm create-react-app project

步骤2： 创建项目文件夹（即project）后，使用以下命令进入该文件夹。

cd project

步骤3： 现在使用以下命令安装依赖项：

npm install @blueprintjs/core

项目结构： 它将如下所示。

React.js蓝图HTML元素组件嵌套用法

示例1： 我们从“@blueprintjs/core”导入了Classes和H1。为了应用这些组件的默认样式，我们还导入了“@blueprintjs/core/lib/css/blueprint.css”，并且按照下面的代码编写。

App.js

import { Classes, H1 } from '@blueprintjs/core'; 
import React from 'react'
import '@blueprintjs/core/lib/css/blueprint.css'; 
function App() { 
    return ( 
        <div style={{ 
            margin: 50 
        }}> 
            <h2 style={{ color: "green" }}> 
                GeeksforGeeks 
            </h2> 
            <h4> 
                React.js BluePrint HTML elements  
                Component Nested usage 
            </h4> 
            <H1 > 
                H1 Tag 
            </H1> 
            <h1>h1 Tag</h1> 
            <div className={Classes.RUNNING_TEXT}> 
                <h1>h1 Tag style like H1 Tag</h1> 
            </div> 
        </div > 
    ); 
} 
  
export default App;

运行应用程序的步骤： 从项目的根目录中使用以下命令运行应用程序。

npm start

输出：

React.js蓝图HTML元素组件嵌套用法

示例2： 我们正在创建一张表，区分HTML元素，并使用另一个使用Classes.RUNNING_TEXT的HTML元素。

App.js

import { Classes } from '@blueprintjs/core'; 
import React from 'react'
import '@blueprintjs/core/lib/css/blueprint.css'; 
function App() { 
    return ( 
        <div style={{ 
            margin: 50 
        }}> 
            <h2 style={{ color: "green" }}>GeeksforGeeks</h2> 
            <h4> 
                React.js BluePrint HTML elements Component  
                Nested usage 
            </h4> 
  
            <table border="1"> 
                <thead> 
                    <tr> 
                        <th>Using RUNNING_TEXT</th> 
                        <th>Without Using RUNNING_TEXT</th> 
                    </tr> 
                    <tr> 
                        <th> 
                            <div className={Classes.RUNNING_TEXT}> 
                                <code>code tag</code> 
                                <blockquote>blockquote tag</blockquote> 
                                <pre>pre tag</pre> 
                            </div> 
                        </th> 
                        <th> 
                            <div> 
                                <code>code tag</code> 
                                <blockquote>blockquote tag</blockquote> 
                                <pre>pre tag</pre> 
                            </div> 
                        </th> 
                    </tr> 
                </thead> 
            </table> 
        </div > 
    ); 
} 
  
export default App;