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

Problemas com renderização condicional (React + Tailwind)

Referente ao curso Tailwind CSS: estilizando a sua página com classes utilitárias

por Kellyson Dias
| 37.4k xp | 12 posts

Estou trabalhando com o design do Codechella, do Frontend Challenge e estou utilizando TypeScript, React e Tailwind. O problema é o seguinte: quero fazer uma renderização condicional para a borda deste meu componente que renderiza uma imagem. Funcionava perfeitamente até eu adicionar a classe "rounded-2xl" no JSX, agora a classe "xl:rounded-l-2xl" que está na condicional não pega mais! Eu não sei se é um problema de especificidade mas se for, eu também não sei como resolver xD. 

import React from "react";
import type { Image } from "../../../Types/Image";
import alts from "./alts.json";

interface Props {
  customImage?: Image;
  isList: boolean | undefined;
  index: number | undefined;
}

export const ImageRenderer: React.FC<Props> = ({
  customImage,
  isList,
  index,
}) => {
  const { url, alt } = customImage ?? {};
  const { summerAlt, borealAlt } = alts;

  const isFirstImage = index === 0;
  const hasCustomImage = Boolean(customImage);
  const hasAlt = Boolean(alt);

  const firstImageBorder = isList && isFirstImage ? "xl:rounded-l-2xl" : "";

  return (
    <div className="flex justify-center h-full">
      {hasCustomImage ? (
        <div className="align-rendered-image">
          <div
            style={{ backgroundImage: `url(${url})` }}
            className={`rendered-card-image rounded-2xl ${firstImageBorder}`}
          />
          {hasAlt && <span className="sr-only">{alt}</span>}
        </div>
      ) : (
        <div className="align-rendered-image">
          <div className="rendered-default-image" />

          <span className="sr-only dark:hidden">{summerAlt}</span>
          <span className="hidden dark:sr-only">{borealAlt}</span>
        </div>
      )}
    </div>
  );
};

Esse é o conteúdo da classe "rendered-card-image": .rendered-default-image { @apply rendered-card-image bg-summer-card dark:bg-boreal-card; }

Repositório: https://github.com/kellysondias/codechella/blob/main/src/components/Card/ImageRenderer/index.tsx

2 respostas
por Nícolas Felipe Ferreira Souza
| 3278.4k xp | 10738 posts
Instrutor

Olá, Kellyson! Como vai?

Pelo seu código, parece que o problema está na classe firstImageBorder que você está adicionando condicionalmente. A classe xl:rounded-l-2xl não está sendo aplicada corretamente quando a classe rounded-2xl já está presente.

Uma solução possível para resolver esse problema de especificidade é utilizar a função classnames para combinar as classes de forma dinâmica. Você pode instalá-la através do npm com o comando npm install classnames e importá-la no seu arquivo:

import classNames from "classnames";

Em seguida, você pode utilizar a função classNames para combinar as classes da seguinte forma:

const firstImageBorder = classNames({
  "xl:rounded-l-2xl": isList && isFirstImage,
  "rounded-2xl": !isList || !isFirstImage
});

Dessa forma, a classe xl:rounded-l-2xl será aplicada apenas quando isList for verdadeiro e isFirstImage for verdadeiro. Caso contrário, apenas a classe rounded-2xl será aplicada.

*Você pode entrar na comunidade da Alura no Discord para discutir com outras pessoas sobre o seu projeto! Veja nesse artigo algumas dicas sobre a comunidade.

Espero ter ajudado. Fico à diposição!

Abraço!

Caso este post tenha lhe ajudado, por favor, marcar como solucionado ✓. Bons Estudos!
solução!
por Kellyson Dias
| 37.4k xp | 12 posts

Oi Nícolas! Muito obrigado pela ajuda, mas infelizmente a sua solução não funcionou :/ . Quando "lg:rounded-l-2xl" é adicionada, a primeira imagem não fica com o estilo desejado, mas com o estilo da classe "rounded-2xl"! Parece que tem algo sobescrevendo o CSS mas eu não sei o que é.

A imagem apresenta um print mostrando que a classe "xl:rounded-l-2xl" foi adicionada no contexto de lista, mas o estilo que está sendo atribuído é o da classe "rounded-2xl", mesmo que esta classe não está sendo atribuída ao componenteCódigo do componente ImageRenderer atualizado:

import React from "react";
import type { Image } from "../../../Types/Image";
import alts from "./alts.json";
import classNames from "classnames";

interface Props {
  customImage?: Image;
  isList: boolean | undefined;
  index: number | undefined;
}

export const ImageRenderer: React.FC<Props> = ({
  customImage,
  isList,
  index,
}) => {
  const { url, alt } = customImage ?? {};
  const { summerAlt, borealAlt } = alts;

  const isFirstImage = index === 0;
  const hasCustomImage = Boolean(customImage);
  const hasAlt = Boolean(alt);

  const imageBorder = classNames({
    "xl:rounded-l-2xl": isList && isFirstImage,
    "rounded-2xl": !isList || !isFirstImage,
  });

  return (
    <div className="flex justify-center h-full">
      {hasCustomImage ? (
        <div className="align-rendered-image">
          <div
            style={{ backgroundImage: `url(${url})` }}
            className={`rendered-card-image ${imageBorder}`}
          />
          {hasAlt && <span className="sr-only">{alt}</span>}
        </div>
      ) : (
        <div className="align-rendered-image">
          <div className="rendered-default-image" />

          <span className="sr-only dark:hidden">{summerAlt}</span>
          <span className="hidden dark:sr-only">{borealAlt}</span>
        </div>
      )}
    </div>
  );
};

Repositório: https://github.com/kellysondias/codechella/blob/main/src/components/Card/ImageRenderer/index.tsx