Entrar Ainda não tem acesso?
Solucionado (ver solução)
Solucionado
(ver solução)
6
respostas

Scss não aplicado

Referente ao curso Angular: explorando o framework, no capítulo Transferências e atividade Melhorando a visualização #1

por Matheus Rocha da Silva
| 30.5k xp | 6 posts
Desenvolvedor FullStack Senior

Olá! Na parte de exibir o extrato no navegador as linhas decorativas da tabela que deveriam aparecer embaixo de data, valor e destino não aparecem no meu. Já comparei meu código com o do instrutor e parecem estar iguais mas o dele funciona e o meu não. Alguém consegue me ajudar?

extrato.component.html do instrutor:

<table class="tabela">
    <thead class="tabela__cabecalho">
      <th class="tabela__cabecalho__conteudo">Data</th>
      <th class="tabela__cabecalho__conteudo">Valor</th>
      <th class="tabela__cabecalho__conteudo">Destino</th>
    </thead>
    <tbody>
      <tr class="tabela__linha" *ngFor="let transferencia of transferencias">
        <td class="tabela__conteudo">
          {{ transferencia.data | date: "short" }}
        </td>
        <td class="tabela__conteudo">{{ transferencia.valor | currency }}</td>
        <td class="tabela__conteudo">{{ transferencia.destino }}</td>
      </tr>
    </tbody>
  </table>

Meu extrato.component.html:

<table class="tabela">
  <thead class="tabela__cabecalho">
    <th class="tabela__cabelhaco__conteudo">Data</th>
    <th class="tabela__cabelhaco__conteudo">Valor</th>
    <th class="tabela__cabelhaco__conteudo">Destino</th>
  </thead>
  <tbody *ngIf="transferencias?.length; else listaVazia">
    <tr class="tabela__linha" *ngFor="let transferencia of transferencias">
      <td class="tabela__conteudo">{{transferencia.data | date:'short'}}</td>
      <td class="tabela__conteudo">{{transferencia.valor | currency}}</td>
      <td class="tabela__conteudo">{{transferencia.destino}}</td>
    </tr>
  </tbody>
</table>

Código extrato.component.scss:

.titulo {
  text-align: center;
  font-size: 24px;
  margin-bottom: 16px;
}

.tabela {
  text-align: center;
  margin: 0 auto;
  background-color: white;
  box-shadow: 0 0 8px rgba(0, 0, 0, 0.1);

  &__cabecalho {
    color: var(--primary);

    &__conteudo {
      padding: 10px;
      border-bottom: 2px solid green;
    }
  }

  &__linha {
    margin-bottom: 10px;
    border-radius: 4px;

    &:last-child {
      .tabela__conteudo {
        border-bottom: none;
      }
    }
  }

  &__conteudo {
    padding: 10px;
    border-bottom: 1px solid var(--cinza-claro);
  }
}

Meu extrato.component.scss:

.titulo {
  text-align: center;
  font-size: 24px;
  margin-bottom: 16px;
}

.tabela {
  text-align: center;
  margin: 0 auto;
  background-color: white;
  box-shadow: 0 0 8px rgba(0, 0, 0, 0.1);

  &__cabecalho {
    color: var(--primary);

    &__conteudo {
      padding: 10px;
      border-bottom: 2px solid green;
    }
  }

  &__linha {
    margin-bottom: 10px;
    border-radius: 4px;

    &:last-child {
      .tabela__conteudo {
        border-bottom: none;
      }
    }
  }

  &__conteudo {
    padding: 10px;
    border-bottom: 1px solid var(--cinza-claro);
  }
}
6 respostas
por Leonardo José da Cunha Peixoto
| 320.7k xp | 91 posts

E o componente extrato, está com o arquivo .scss no campo styleUrls do decorator @Component ?

por Matheus Rocha da Silva
| 30.5k xp | 6 posts
Desenvolvedor FullStack Senior

Está sim.

Meu extrato.component.ts

import { Component, Input, OnInit } from '@angular/core';

@Component({
  selector: 'app-extrato',
  templateUrl: './extrato.component.html',
  styleUrls: ['./extrato.component.scss'],
})
export class ExtratoComponent implements OnInit {
  @Input() transferencias: any[];

  constructor() {}

  ngOnInit(): void {}
}
por Daniel Alexandre Carneiro
| 38.7k xp | 20 posts
Engenheiro de desenvolvimento de software senior

Boa tarde, Matheus, tudo certo?

Percebi que há um typo (erro de digitação) em seu código. Então, como o nome da classe no seu CSS é outro do que está escrito, esses estilos não estão sendo aplicados. Corrija a parte abaixo e veja se seu problema é resolvido.

  <thead class="tabela__cabecalho">
    <th class="tabela__**cabelhaco**__conteudo">Data</th>
    <th class="tabela__**cabelhaco**__conteudo">Valor</th>
    <th class="tabela__**cabelhaco**__conteudo">Destino</th>
  </thead>

Abraços!

por Matheus Rocha da Silva
| 30.5k xp | 6 posts
Desenvolvedor FullStack Senior

Boa tarde, Daniel

Esse typo foi quando eu passei o código pra cá, lá já estava correto.

<thead class="tabela__cabecalho">
    <th class="tabela__cabecalho__conteudo">Data</th>
    <th class="tabela__cabecalho__conteudo">Valor</th>
    <th class="tabela__cabecalho__conteudo">Destino</th>
  </thead>
por Matheus Rocha da Silva
| 30.5k xp | 6 posts
Desenvolvedor FullStack Senior

Alguém teve o mesmo erro? Ou sabe o pq está acontecendo?

solução!
por Matheus Rocha da Silva
| 30.5k xp | 6 posts
Desenvolvedor FullStack Senior

Encontrei o problema, eu estava usando somente 1 '' no nome da classe dentro do layout do extrato . Alterei para 2 '' e o erro foi resolvido.