-2

PS. A idéia aqui não é usar o parâmetro diretamente no styled: opacity: ${(props) => props.myArr[0].myOpacity)} . A idéia seria:

  1. Passar um parâmetro (myArray) de um componente qualquer para um styled-components:
<Wrap myArr={myArr}> ... <Wrap/>
  1. Receber esse parâmetro dentro de um styled:
export const Wrap = styled.div<{myArr: Object[]}>`
   //...
   ${ myFunc(props.myArr) } //<<< aqui minha dúvida
`;
  1. Enviar esse parâmetro para uma função dentro do mesmo arquivo.
Function myFunc(myArr: Object[]) {
   //...
}
1
  • Não entendi ao certo sua necessidade... Você não quer escrever varias linhas de props no styled-component e então está procurando uma maneira de passar um "array" de estilização para que seja executado no styled-components no menor número possível de linhas? Commented 19/09/2021 às 13:23

1 Resposta 1

-1

Vc faria assim...

import styled, { css } from 'styled-components';


function myFunc(arr: Object[]) {
  return css`
     // SUAS PROPS CSS
  `;
}

export const Wrap = styled.View<{ myArr: Object[] }>`
  ${({ myArr }) => myFunc(myArr)}
`;

Você deve fazer log-in para responder a esta pergunta.

Esta não é a resposta que você está procurando? Pesquise outras perguntas com a tag .