Inicio
Documentación
Recursos
Certificaciones
Comunidad
Cambiar variables CSS - Personalizaciones generales - Mercado Pago Developers

Búsqueda inteligente powered by OpenAI 

Cambiar variables CSS

Client-Side

-Brick
Momento de personalizaciónAl renderizar Brick
Propiedadcustomization.visual.style.customVariables.{textPrimaryColor, textSecondaryColor, inputBackgroundColor, formBackgroundColor, baseColor, baseColorFirstVariant, baseColorSecondVariant, errorColor, successColor, outlinePrimaryColor, outlineSecondaryColor, buttonTextColor, fontSizeExtraSmall, fontSizeSmall, fontSizeMedium, fontSizeLarge, fontSizeExtraLarge, fontWeightNormal, fontWeightSemiBold, formInputsTextTransform, inputVerticalPadding, inputHorizontalPadding, inputFocusedBoxShadow, inputErrorFocusedBoxShadow, inputBorderWidth, inputFocusedBorderWidth, borderRadiusSmall, borderRadiusMedium, borderRadiusLarge, formPadding}
Tipostring
ObservacionesLos valores de tamaño como fontSize y padding aceptan valores en px, rem, em y %. Estos ajustes cambian las variables CSS que controlan el tema.
          
const settings = {
    ...,
    customization: {
        visual: {
            style: {
                customVariables: {
                    textPrimaryColor: 'string',
                    textSecondaryColor: 'string',
                    ...,
                },
            },
        }
        ...,
    },
}

        
          
const customization = {
 visual: {
   style: {
     customVariables: {
       textPrimaryColor: 'string'
       textSecondaryColor: 'string'
     }
   }
 }
};

        
Importante
Si necesita personalizar el estilo visual de Brick además de personalizar temas y variables personalizadas, le recomendamos que no utilizar como referencia o selector el valor de las clases e ID de CSS que son enviados con los Bricks, ya que se generan automáticamente durante el proceso de build de la aplicación y cambian regularmente. Utilice la herencia de elementos HTML para acceder a lo que necesita personalizar.