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:
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" }}> neveropen </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" }}>neveropen</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
