Solucionado (ver solução)
Solucionado
(ver solução)
2
respostas

Estilização componentes de formulário

Bom dia! Onde trabalho venho desenvolvendo um projeto utilizando o Ionic, mas no desenvolver das telas do app, preciso utilizar alguns componente como o ion-datetime e o ion-select, mas venho tendo dificuldades em como sobrescrever os estilos próprios do componente. para condizer com o layout desenvolvido pelo designer. Já passei algumas horas inspecionando o componente no chrome, mas até então sem sucesso, alguém poderia me dar algum norte em como eu poderia estilizar mais facilmente?

2 respostas

Oi Daniel, a documentação do Ionic mostra alguns recursos sobre temas e customizações que você pode fazer. Elas começam apresentando alguns recursos básicos de CSS, depois SASS e por último, você pode sobrescrever variáveis do próprio Ionic.

Neste último caso, você só precisa escrever o nome da variável e o valor em um arquivo sass. Você já deu uma verificada?

https://ionicframework.com/docs/theming/overriding-ionic-variables/

solução!

Boa tarde, Daniel! Como vai?

Para vc customizar o CSS vc vai precisar analisar o HTML gerado pelo Ionic para poder entender melhor como as classes são aplicadas.

Por exemplo, se vc aplicar uma classe com um background customizado diretamente no ion-select vc vai ver que somente a área onde está a seta de seleção é que será customizada. Se quiser que o background seja adicionado em toda a área do ion-select, vc terá que envolver ele com um ion-item e aplicar a classe nesse elemento.

Essa tarefa vai requerer de vc um bom conhecimento da estruturação do DOM e de regras de aplicação de CSS.

Grande abraço e bons estudos, meu aluno!