Estilos de tipografía ReactJS MDBootstrap

MDBootstrap es una biblioteca de interfaz de usuario de reacción basada en diseño de materiales y bootstrap que se utiliza para crear páginas web atractivas con su componente sencillo y fácil de usar.

En este artículo, sabremos cómo usar estilos tipográficos en ReactJS MDBootstrap. Los estilos tipográficos se utilizan para agregar diferentes tipos de elementos de texto, como encabezados, abreviaturas, comillas en bloque, etc.

Sintaxis:

<MDBTypography variant="h1">GeeksforGeeks</MDBTypography>

Creación de la aplicación React e instalación del módulo:

Paso 1: Cree una aplicación React usando el siguiente comando.

npx create-react-app foldername

Paso 2: después de crear la carpeta de su proyecto, es decir, el nombre de la carpeta, muévase a ella con el siguiente comando.

cd foldername

Paso 3: Instale ReactJS MDBootstrap en su directorio dado.

npm i mdb-ui-kit
npm i mdb-react-ui-kit

Estructura del proyecto: Tendrá el siguiente aspecto.

Paso para ejecutar la aplicación: ejecute la aplicación desde el directorio raíz del proyecto, utilizando el siguiente comando.

npm start

Ejemplo 1: Este es el ejemplo básico que muestra cómo usar Estilos tipográficos.

import React from "react";
import { MDBTypography } from "mdb-react-ui-kit"; 
  
export default function App() {
  return (
    <div id='gfg'>
      <h2>GeeksforGeeks</h2>
      <h4>ReactJS MDBootstrap Typography Styles</h4>
         
      <br/>
      <MDBTypography variant='h1'>Heading H1</MDBTypography>
      <hr />
      <MDBTypography variant='h2'>Heading H2</MDBTypography>
      <hr />
      <MDBTypography variant='h3'>Heading H3</MDBTypography>
      <hr />
      <MDBTypography variant='h4'>Heading H4</MDBTypography>
      <hr />
      <MDBTypography variant='h5'>Heading H5</MDBTypography>
      <hr />
      <MDBTypography variant='h6'>Heading H6</MDBTypography>
  
    </div>
  
  );
}

Producción:

Estilos de tipografía ReactJS MDBootstrap

Ejemplo 2: En este ejemplo, sabremos cómo agregar leads en un Estilos tipográficos.

import React from "react";
import { MDBTypography } from "mdb-react-ui-kit"; 
  
export default function App() {
  return (
    <div id='gfg'>
      <h2>GeeksforGeeks</h2>
      <h4>ReactJS MDBootstrap Typography Styles</h4>
         
      <br/>
      <MDBTypography className='lead mb-0'>MDBootstrap is a 
      Material Design and bootstrap-based react UI library
      <br/> that is used to make good looking webpages with its
      seamless and easy-to-use component.</MDBTypography>
    </div>
  
  );
}

Producción:

Estilos de tipografía ReactJS MDBootstrap

Ejemplo 3: en este ejemplo, sabremos cómo agregar comillas en bloque en un estilo tipográfico.

import React from "react";
import { MDBTypography } from "mdb-react-ui-kit"; 
  
export default function App() {
  return (
    <div id='gfg'>
      <h2>GeeksforGeeks</h2>
      <h4>ReactJS MDBootstrap Typography Styles</h4>
         
      <br/>
      <MDBTypography blockquote >
      <p>MDBootstrap is a Material Design and bootstrap-based
         react UI library that is <br/> used to make good 
         looking webpages with its seamless and 
         easy-to-use component.</p>
      </MDBTypography>
    </div>
  );
}

Producción:

Estilos de tipografía ReactJS MDBootstrap

Referencia: https://mdbootstrap.com/docs/b5/react/content-styles/typography/