Personalizando estilos de componentes no Ignite UI for Web Components

    Os componentes Ignite UI for Web Components permitem que os usuários modifiquem várias partes de sua folha de estilo expondo variáveis CSS e partes CSS.

    CSS Parts

    Além dos métodos para personalizar as várias partes do tema do componente, como cores, sombras, tipografia, redondeza, tamanho e espaçamento mencionados nas seções anteriores desta documentação, você pode sujar as mãos substituindo seções específicas da folha de estilo de cada componente, visando partes específicas dele. Todos os componentes expõem várias partes CSS que permitem adicionar ou substituir estilos existentes definidos internamente para o componente.

    Quais partes um componente expõe podem ser encontradas na documentação da API para cada componente. Se você é do tipo exploratório e deseja ter uma abordagem mais prática para a codificação, sempre pode descobrir isso usando a interface 'inspetor' do navegador de sua escolha. Por exemplo, se você quiser descobrir quais partes o avatar expõe, basta clicar com o botão direito do mouse no componente em seu navegador e clicar em 'Inspecionar' (no Chrome). Isso abrirá o inspetor da Web e revelará a marcação de elemento personalizado na guia do explorador de elementos. Você deve ver algo semelhante à captura de tela abaixo.

    Você notará que o IgcAvatarComponent expõe 4 partes -base, icon, image, e initials dependendo do tipo de avatar. Essas partes permitem que você substitua estilos definidos dentro de seu escopo.

    Portanto, se você quiser alterar a cor das iniciais para a cor primária em sua paleta, poderá substituir a propriedade color em um ou base​ ​initials assim:

    igc-avatar::part(base) {
  color: var(--ig-primary-500);
}

    Você pode usar a mesma abordagem para modificar ou adicionar qualquer propriedade na base peça ou qualquer outra peça em qualquer outro componente.

    CSS Variables

    Uma abordagem alternativa seria modificar as variáveis CSS responsáveis por várias partes do estilo do componente. Convenientemente, o avatar estiliza suas iniciais usando uma variável da paleta existente. Após uma inspeção mais detalhada, podemos ver que a variável de cor é--ig-gray-800. Modificar o valor dessa variável no escopo do avatar também nos permitiria alterar a cor das iniciais.

    igc-avatar {
  --ig-gray-800: hsl(0, 0%, 62%);
}

    Reescrever o valor da--ig-gray-800 variável faz o mesmo que o exemplo anterior sem substituir explicitamente a propriedade color. Essa abordagem funciona, mas pode ficar um pouco confuso para rastrear de onde a cor está vindo se você inspecionar a propriedade color isoladamente. Portanto, é recomendável substituir a propriedade de cor na peça base.

    Conclusion

    Tendo aprendido sobre partes CSS e variáveis CSS e em combinação com os outros métodos listados na documentação, você deve ser capaz de adaptar a aparência de todos os componentes ao seu gosto.

    API References

    • ConfigureTheme