How do I pass a parameter to an external function from within the STYLED-COMPONENTS using Reactjs with Typescript?

Question

PS. The idea here is not to use the parameter directly in Styled: opacity: ${(props) => props.myArr[0].myOpacity)} . The idea would be:

1. Pass a parameter (myArray) of any component for a Styled-Components:

<Wrap myArr={myArr}> ... <Wrap/>

2. Receive this parameter within a Styled:

export const Wrap = styled.div<{myArr: Object[]}>`
   //...
   ${ myFunc(props.myArr) } //<<< aqui minha dúvida
`;

3. Send this parameter to a function within the same file.

Function myFunc(myArr: Object[]) {
   //...
}

Answer 1

You would do so...

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)}
`;