React.js Blueprint HTML Elements Component Nested Usage

React.js Blueprint is a front-end UI toolkit. It is very optimized and popular for building interfaces that are complex data-dense for desktop applications. 

We can add styles and the features of React.js BluePrint HTML elements Component to the HTML elements just by providing a className {Classes.RUNNING_TEXT} to the parent element, which will change the style of all the nested elements. 

Syntax:

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

Prerequisite:

• Introduction and Installation ReactJS
• React.js BluePrint HTML Elements Component 

Creating React Application and Module installation:

Step 1:  Create a React application using the following command:

npm create-react-app project

Step 2: After creating your project folder(i.e. project), move to it by using the following command.

cd project

Step 3:  Now install the dependency by using the following command:

npm install @blueprintjs/core

Project Structure: It will look like this.

Example 1: We are importing Classes and H1  from “@blueprintjs/core”. To apply the default styles of the components we are importing “@blueprintjs/core/lib/css/blueprint.css” and following the below-written code.

App.js

Javascript

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;

Step to Run Application: Run the application using the following command from the project’s root directory.

npm start

Output:

Example 2:  We are creating a table with two Columns differentiating between HTML elements and using another with HTML elements using  Classes.RUNNING_TEXT.

App.js

Javascript

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;

Step to Run Application: Run the application using the following command from the project’s root directory.

npm start

Output:

Reference: https://blueprintjs.com/docs/#core/components/html.nested-usage