J'ai une table dont je stylise les lignes avec nth-of-type(even). Maintenant, je dois ajouter une condition pour remplacer la couleur de la ligne uniquement si la valeur est inférieure à 0. J'utilise des composants stylisés et mon code ressemble à ceci

<StyledTableRow
      data={row}
      hover
      key={index}
      onClick={() => {
        rowClick && rowClick(row);
      }}
 >
      {headers.map(
        ({ column, label, transform }: { column: string; label: string; transform?: any }) 
       => (
          <StyledTableCell component="th" scope="row" key={label}>
            <RowText link={column === 'email' || column === 'name'}>
              {transform ? transform(row) : row[column]}
            </RowText>
          </StyledTableCell>
        )
      )}
 </StyledTableRow>

Et le composant stylisé est comme ça

const StyledTableRow = styled(TableRow) <RowDataProps>`
/* background-color: ${({ theme, data }) => data.daysOut < 0 ? theme.colors.danger : 
   theme.colors.secondary}; */
   &:nth-of-type(even) {
      background-color: ${({ theme }) => theme.colors.secondary};
   }
`;

Qu'est-ce que je fais mal?

0
Milos 2 sept. 2020 à 16:32

2 réponses

Meilleure réponse

Peut-être que cela fonctionnera:

    const StyledTableRow = styled(TableRow) <RowDataProps>`
   :nth-of-type(even) {
 background-color: ${({ theme, data }) => data.daysOut < 0 ? theme.colors.danger : 
   theme.colors.secondary};
   }
 background-color: ${({ theme, data }) => data.daysOut < 0 ? theme.colors.danger : 
   initial};
    `;
1
IustiNN 2 sept. 2020 à 14:28

Quelle est la structure des données transmises comme accessoires? Malheureusement, je ne peux pas commenter, donc l'afficher comme réponse.

0
sgrmhdk 2 sept. 2020 à 14:09