Para alterar os estilos das classes dos componentes, é necessário enviar o objeto window.adoptChangeClasses no script Javascript com o seguinte formato:
window.adoptChangeClasses = { styles: { web: {}, mobile: {} }, hasImportant: true }
No código acima é possível visualizar que existem 2 propriedades internas que são os styles e o hasImportant.
styles: É o objeto onde são inseridos as propriedades CSS das classes e estão separados em mais 2 níveis, que são o web e mobile. Onde é possível realizar customizações diferentes conforme a responsividade da tela.
hasImportant: É uma propriedade do tipo boolean que é responsável por permitir ou não permitir que as classes sejam sobrescrevidas por estilos globais do site, através do uso do atributo "! important" do CSS. Por padrão ela possui o valor true, ou seja, se o usuário decidir permitir que os estilos globais de seu site sobrescrevam ou influenciem nas classes da tag, ele deverá setar o valor false nessa propriedade.
A tag foi separada em 4 principais componentes aos quais possuem suas classes específicas:
Abaixo segue o formato do objeto completo com todos os nomes das classes existentes para customização:
{ styles: { web: { controller: { button: {}, }, card: { container: {}, content: {}, textContainer: {}, titleRow: {}, whiteLabelLogo: {}, adoptLink: {}, textsRow: {}, textRowContent: {}, textRowLinks: {}, buttonsContainer: {}, rejectAllLink: {}, rejectAllButton: {}, preferencesButton: {}, acceptAllButton: {} }, preferenceCard: { panel: {}, title: {}, closePanel: {}, tagCategories: {}, cardFooter: {}, smallTextFooter: {}, buttonsContainer: {}, rejectButton: {}, acceptButton: {} }, categories: { category: {}, title: {}, icon: {}, description: {}, toogleShowTags: {}, tag: {}, tagTitleSection: {}, tagTitle: {}, tagCookieContainer: {}, tagCleanCacheLink: {} } }, mobile: { controller: { button: {}, }, card: { container: {}, content: {}, textContainer: {}, titleRow: {}, whiteLabelLogo: {}, adoptLink: {}, textsRow: {}, textRowContent: {}, textRowLinks: {}, buttonsContainer: {}, rejectAllLink: {}, rejectAllButton: {}, preferencesButton: {}, acceptAllButton: {} }, preferenceCard: { panel: {}, title: {}, closePanel: {}, tagCategories: {}, cardFooter: {}, smallTextFooter: {}, buttonsContainer: {}, rejectButton: {}, acceptButton: {} }, categories: { category: {}, title: {}, icon: {}, description: {}, toogleShowTags: {}, tag: {}, tagTitleSection: {}, tagTitle: {}, tagCookieContainer: {}, tagCleanCacheLink: {} } } }, hasImportant: true }
As propriedades CSS devem ser inseridas em formato CamelCase. Segue alguns exemplos: