Ícone do site TWRT

CSS no Mendix | Como Fazer Estilização Passo a Passo

eduardosalerno

#image_title

O Mendix é uma das principais plataformas low-code para desenvolvimento de aplicativos modernos. Ele oferece uma grande variedade de elementos pré-construídos, temas prontos e padrões visuais através do Atlas UI, o que acelera o desenvolvimento.

No entanto, muitas vezes empresas e desenvolvedores precisam aplicar cores, fontes e estilos específicos que fazem parte da identidade visual da marca. É aí que entra o uso do CSS e SCSS no Mendix, permitindo personalizações avançadas que transformam completamente a aparência do aplicativo.

Neste artigo completo, você vai aprender:

🌟 Objetivo: que ao final deste guia você seja capaz de aplicar estilos avançados no Mendix de forma estruturada, profissional e escalável.

📌 Por que usar CSS no Mendix?

O Mendix oferece o Atlas UI com componentes prontos, mas nem sempre ele atende às necessidades de personalização.

Vantagens de usar CSS no Mendix:

💡 Exemplo prático: se sua empresa usa uma paleta branco, vermelho e preto, mas o Atlas traz elementos em azul, é possível ajustar tudo via CSS/SCSS.

⚡ Opções de Estilização no Mendix

O Mendix oferece três principais formas de aplicar estilos:

MétodoDescriçãoMelhor uso
Inline Style (Style Property)Aplicar CSS diretamente no componente via aba StylingAjustes rápidos e pontuais
Dynamic ClassesAlterar estilos com base em condições de entidades e variáveisCasos dinâmicos (ex.: cor muda conforme status do pedido)
Arquivos SCSS/CSSCriar páginas de estilo globais e organizadas dentro da pasta StylingCustomizações avançadas e consistência em todo o app

👉 Para projetos maiores, o ideal é trabalhar com SCSS porque permite variáveis, importações e reaproveitamento de estilos.

🎨 Como Aplicar Estilos Direto no Mendix (Style Property)

Cada componente no Mendix possui a aba Styling, onde você pode aplicar CSS diretamente.

Exemplo:

  1. Selecione o componente (ex.: Top Bar / Header).
  2. Vá até a aba Styling.
  3. Adicione o código:
background-color: #000000; /* Preto */
color: #FFFFFF; /* Branco */

Esse método é útil para pequenas mudanças rápidas, como:

🚨 Atenção: evite centralizar toda a estilização em inline styles, pois dificulta a manutenção.

📂 Estrutura de Estilos no Mendix

Na pasta do aplicativo, você encontrará:

Tipos de arquivos que podem ser criados:

🚀 Criando Arquivos SCSS no Mendix

Para criar um arquivo SCSS personalizado:

  1. Vá até a pasta Styling > Web.
  2. Clique com o botão direito > Add File > SCSS.
  3. Dê um nome (ex.: styles.scss).
  4. No arquivo, crie suas classes personalizadas:
.btn-custom {
  background-color: #FF0000; /* Vermelho */
  color: #FFFFFF; 
  border-radius: 8px;
  padding: 12px 20px;
}

.btn-custom:hover {
  background-color: #000000; /* Preto */
  color: #FFFFFF;
}
  1. Vá até main.scss e importe o novo arquivo:
@import "./styles.scss";

Agora sua classe .btn-custom pode ser aplicada em qualquer botão dentro do Mendix.

🖌️ Exemplo Prático: Estilizando o Top Bar

Suponha que o Top Bar está em azul, mas a paleta do app é preto, vermelho e branco.

Passo 1: Identificar a classe

No Mendix, a classe padrão do Top Bar é region-topbar.

Passo 2: Criar regra CSS

.region-topbar {
  background-color: #000000; /* Preto */
  color: #FFFFFF;
}

Passo 3: Aplicar

Salve e rode o app → agora o Top Bar segue a paleta da marca.

🖱️ Exemplo Prático: Botão com Hover Personalizado

Um dos casos mais comuns é alterar botões.

.btn-pedido {
  background-color: #FF0000; /* Vermelho */
  color: #FFFFFF;
  font-weight: bold;
}

.btn-pedido:hover {
  background-color: #000000; /* Preto */
  color: #FFFFFF;
}

Aplicando a classe .btn-pedido, você terá botões com hover dinâmico, muito além do padrão Atlas UI.

🔠 Alterando Fontes no Mendix

Você pode usar fontes padrão ou importar do Google Fonts.

Exemplo com Google Fonts:

No custom-variables.scss:

@import url('https://fonts.googleapis.com/css2?family=Roboto:wght@400;700&display=swap');

$font-family-base: 'Roboto', sans-serif;

No styles.scss:

h1, h2, h3 {
  font-family: $font-family-base;
  font-weight: 700;
}

p {
  font-family: $font-family-base;
  font-weight: 400;
}

Resultado: toda a tipografia do app passa a usar Roboto.

🗂️ Dynamic Classes no Mendix

As Dynamic Classes permitem aplicar estilos baseados em condições.

Exemplo: Status de Pedido

.status-aberto {
  background-color: #FFEB3B; /* Amarelo */
}

.status-entregue {
  background-color: #4CAF50; /* Verde */
  color: #FFFFFF;
}

No Mendix, você pode configurar:

💡 Útil para dashboards, listas de pedidos, alertas e muito mais.

✅ Boas Práticas de Estilização no Mendix

  1. Centralize estilos em SCSS → evite espalhar inline styles.
  2. Use variáveis globais (custom-variables.scss) → mantém consistência.
  3. Separe por módulos → crie arquivos SCSS diferentes (botões, layouts, formulários).
  4. Use nomes de classes semânticos → ex.: .btn-pedido, .status-entregue.
  5. Faça testes constantes → rode o app para verificar os efeitos visuais.
  6. Documente suas classes → importante para equipes que compartilham código.

📊 Tabela Resumida de Tags CSS Mais Usadas no Mendix

PropriedadeUsoExemplo
background-colorDefine cor de fundobackground-color: #000;
colorDefine cor da fontecolor: #FFF;
font-sizeTamanho da fontefont-size: 16px;
font-familyTipo de fontefont-family: Roboto;
paddingEspaçamento internopadding: 10px;
marginEspaçamento externomargin: 20px;
border-radiusBordas arredondadasborder-radius: 8px;
hoverEfeito ao passar o mouse.btn:hover { ... }

🌟 Conclusão

O Mendix já é uma plataforma poderosa por si só, mas ao dominar o uso de CSS e SCSS, você consegue:

🎨 Desde mudar cores simples até construir temas completos, o CSS no Mendix é a chave para transformar aplicativos low-code em soluções profissionais e sofisticadas.

👉 Próximo passo: crie seu próprio arquivo SCSS, defina variáveis de cor e comece a aplicar sua paleta e tipografia no seu aplicativo.

eduardosalerno
See Full Bio
Sair da versão mobile