CSS não funcionando

Olá, Mauricio! Tudo bem?

Analisando o seu código, percebo que você está tentando estilizar um componente dinâmico, onde a tag HTML é definida pela propriedade 'as'. No entanto, o problema está na forma como você está tentando aplicar o estilo.

Você está tentando usar a variável 'Tag' dentro do bloco de estilo, mas a sintaxe do CSS não permite isso. O CSS não entende variáveis JavaScript, então, quando você tenta usar ${Tag} dentro do bloco de estilo, o CSS não sabe o que fazer com isso.

Aqui está uma maneira alternativa de abordar o problema:

import React from "react";
import Link from "../src/components/Link";

function Title({ children, as }) {
  const Tag = as;
  return (
    <React.Fragment>
      <Tag style={styles.title}>
        {children};
      </Tag>
    </React.Fragment>
  );
}

const styles = {
  title: {
    color: 'red',
    fontFamily: 'sans-serif',
  }
}

export default function HomePage() {
  return (
    <div>
      <Title as="h5">Alura Cases - home</Title>
      <Link href="/faq">Ir para FAQ </Link>
    </div>
  );
}

Neste exemplo, estou usando a propriedade 'style' do React para aplicar estilos diretamente ao componente. Os estilos são definidos em um objeto JavaScript fora do componente e depois aplicados diretamente ao componente usando a propriedade 'style'.

Espero que isso resolva o problema que você está enfrentando. Continue estudando e explorando o Next.js, é uma ferramenta poderosa! Espero ter ajudado e bons estudos! -