Tipografía de interfaz de usuario de materiales

Material-UI es una biblioteca de interfaz de usuario que proporciona componentes de React predefinidos y personalizables para un desarrollo web más rápido y sencillo. Estos componentes de Material-UI se basan en la parte superior de Material Design de Google. En este artículo, analicemos el componente Tipografía en la biblioteca Material-UI .

Tipografía:

La tipografía es un componente Material-UI que se utiliza para estandarizar el texto y sus propiedades CSS relacionadas sin preocuparse por los problemas de compatibilidad del navegador.

Ejemplo:

<Typography variant="h1"> h1 - Heading Variant </Typography>

Instalación de la aplicación React:

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

npx create-react-app typography-example

Paso 2: ahora ingrese al directorio del proyecto con el siguiente comando:

cd typography-example

Instalación de Material-UI: 

Instalando los archivos fuente de Material-UI a través de npm/yarn, y se encargan de inyectar el CSS necesario.

npm install @material-ui/core 
// OR
yarn add @material-ui/core

Importación de tipografía:

Puede importar el componente <Typography /> desde @material-ui/core usando el siguiente código.

import { Typography } from '@material-ui/core' 
// OR
import Typography from '@material-ui/core/Typography'

Accesorios importantes y sus valores:

• align: Se utiliza para alinear el texto en el componente. Ejemplo: heredar, izquierda, centro, derecha o justificar.
• color: Se utiliza para establecer el color del texto del componente. Ejemplo: inicial, heredado, primario, secundario, textPrimary, textSecondary o error.
• variante: Se utiliza para establecer los estilos de tipografía del tema. Ejemplo: h1, h2, h3, h4, h5, h6, subtitle1, subtitle2, body1, body2, caption, button, overline, srOnly o heredar.
• clases: Es el objeto CSS personalizado para anular los estilos.
• párrafo: Si esto es cierto, el texto tendrá un margen inferior. Ejemplo: verdadero o falso.

Ejemplo: Implementación de estilo H1, H2, H3 usando <Typography /> en el archivo App.js.

import { Typography } from '@material-ui/core';
  
function App() {
  return (
    <div className="App">
      {/* Setting the text styling to H1*/}
      <Typography variant="h1">
        H1.Heading
      </Typography>
      {/* Setting the text to center with align prop */}
      <Typography align="center" variant="h2">
        H2.Heading
      </Typography>
      {/* Setting the text color to primary*/}
      <Typography color="primary" variant="h3">
        H3.Heading
      </Typography>
      {/* Setting the text type styling to be like a button */}
      <Typography variant="button">
        Button
      </Typography>
    </div>
  );
}
  
export default App;

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

npm start

Producción: