Componente ConfigProvider de ReactJS UI Ant Design

. El componente ConfigProvider se utiliza para proporcionar soporte de configuración uniforme para los componentes. Podemos usar el siguiente enfoque en ReactJS para usar el componente Ant Design ConfigProvider.

Accesorios de ConfigProvider:

• autoInsertSpaceInButton: cuando se establece en falso, elimina el espacio entre 2 caracteres chinos en el botón.
• componentSize: Se utiliza para configurar el tamaño del componente antd.
• csp: se utiliza para establecer la configuración de la política de seguridad de contenido.
• dirección: Se utiliza para establecer la dirección del diseño.
• dropdownMatchSelectWidth: se utiliza para determinar si el menú desplegable y la entrada de selección tienen el mismo ancho o no.
• form: Se utiliza para configurar los accesorios comunes de Form.
• getPopupContainer: se utiliza para establecer el contenedor del elemento emergente.
• getTargetContainer: se utiliza para el Config Affix, Anchor scroll target container.
• iconPrefixCls: se utiliza para establecer el prefijo del icono className.
• entrada: se utiliza para establecer accesorios comunes de entrada.
• configuración regional: se utiliza para indicar la configuración del paquete de idioma.
• pageHeader: Se utiliza para unificar el fantasma de PageHeader.
• prefixCls: Se utiliza para establecer el prefijo className.
• renderEmpty: Se utiliza para establecer el contenido vacío de los componentes.
• espacio: Se utiliza para establecer el tamaño del espacio.
• virtual: se utiliza para deshabilitar el desplazamiento virtual cuando se establece en falso.

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 , acceda a ella con el siguiente comando:

  cd foldername

• Paso 3: Después de crear la aplicación ReactJS, instale el módulo requerido usando el siguiente comando:

  npm install antd

Estructura del proyecto: Tendrá el siguiente aspecto.

Estructura del proyecto

Ejemplo: ahora escriba el siguiente código en el archivo App.js. Aquí, la aplicación es nuestro componente predeterminado donde hemos escrito nuestro código.

import React from 'react'
import "antd/dist/antd.css";
import { ConfigProvider } from 'antd';
  
export default function App() {
  return (
    <div style={{
      display: 'block', width: 700, padding: 30
    }}>
      <h4>ReactJS Ant-Design ConfigProvider Component</h4>
      <ConfigProvider componentSize={"small"}>
        <label>
          It provides a uniform configuration 
          support for components
        </label>
      </ConfigProvider>
    </div>
  );
}

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

npm start

Salida: Ahora abra su navegador y vaya a http://localhost:3000/ , verá la siguiente salida:

Referencia: https://ant.design/components/config-provider/