Alterar variáveis CSS - Customizações gerais - Mercado Pago Developers
O que você está buscando?

Não sabe como começar a integrar? 

Acesse os primeiros passos

Alterar variáveis CSS

Client-Side

-Brick
Momento da customizaçãoAo renderizar Brick
Propriedadecustomization.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
ObservaçõesOs valores de tamanho, como fontSize e padding, aceitam valores em px, rem, em e %. Essas configurações alteram as variáveis CSS que controlam o tema.
          
const settings = {
    ...,
    customization: {
        visual: {
            style: {
                customVariables: {
                    textPrimaryColor: 'string',
                    textSecondaryColor: 'string',
                    ...,
                },
            },
        }
        ...,
    },
}

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

        
Importante
Caso precise customizar o estilo visual do Brick para além das customizações de temas e variáveis customizadas, recomendamos que não utilize as classes e ids CSS que são enviadas com os Bricks como referência, visto que são gerados automaticamente durante o processo de build da aplicação e mudam regularmente. Utilize a herança dos elementos HTML para acessar os elementos que necessitar customizar.