Tengo una Box de componentes que se ve así:
const Box = ({ className, country }) => { const status = myStatusFunction(country); return ( <div className={className} status={status}> {country} </div> ); }; Quiero usar este componente en mi opinión, pero también agregarle un estilo personalizado en función de la propiedad de status , por lo que mi styled.js se ve así:
import _Box from 'components/Box'; const Box = styled(_Box)` ${({ status }) => { if (status === 'available') { return css` background-color: green; `; } return css` background-color: red; `; }} ` El problema aquí es que el status no está undefined aquí, por lo que mi pregunta es: ¿puedes acceder de alguna manera al accesorio de status ?
Dado que React tiene un flujo de datos de arriba hacia abajo, esto no es posible. Sugeriría hacer de la variable de status un accesorio del componente Box para seguir el flujo de datos de arriba hacia abajo.
El significado del flujo de arriba hacia abajo es que la información solo fluye de padre a hijo. Al encapsular el componente _Box en la función styled , básicamente convierte a _Box en un componente secundario del Box con estilo recién creado. Esto significa que, en esta situación, está intentando recopilar información del elemento secundario en el componente principal.
Espero que esto responda tu pregunta :)
import { Wrapper } from './styles.js'; const Box = ({ className, country }) => { const status = myStatusFunction(country); return ( <Wrapper className={className} status={status}> {country} </Wrapper> ); };estilos.js:
export const Wrapper = styled.div` ${({ status }) => { if (status === 'available') { return css` background-color: green; `; } return css` background-color: red; `; }} `