Estoy usando reaccionar con el siguiente enfoque funcional

 const Divider: React.FunctionComponent = ({children}) => ( <div> // I want to use color props here of Card divider {children} </div> ); const Card: React.FunctionComponent = ({children, color}) => { const color = props.color return( <div> card {children} </div> )} Card.Divider = Divider;

y llamo a estos componentes de la siguiente manera

 <Card color="red"> <Card.Divider> Any text <Card.Divider/> <Card />

El problema es: ¿Cómo puedo obtener los accesorios de color en el componente Divider?

PD: no quiero repetir los accesorios que pasan de nuevo por el divisor como el siguiente

 <Card color="red"> <Card.Divider color="red"> Any text <Card.Divider/> <Card />

Lo que quiero es el siguiente enfoque y todavía puedo usar accesorios de color en el componente Divider, ¿cómo puedo hacer eso?

 <Card color="red"> <Card.Divider> Any text <Card.Divider/> <Card />