Dado el siguiente ejemplo de componente simple que usa componentes con estilo para Pressable:
const StyledPressable = styled.Pressable = props => props.buttonStyle const Icon: FC<{buttonStyle: string}> = ({buttonStyle}) => { return ( <StyledPressable buttonStyle={buttonStyle} > <SomeIconComponent/> </StyledPressable> ) }Me gustaría crear un componente reutilizable que admita accesorios de estilo sin dejar de usar componentes con estilo. Normalmente, al usar los estilos nativos de Vanilla React, esto es realmente simple, uno simplemente pasaría el objeto de estilo como accesorio y lo usaría como un valor en el componente necesario. ¿Cómo lograría este comportamiento usando componentes con estilo? mi conjetura inicial es que el buttonStyle tiene que ser una cadena en el mismo formato que los componentes con estilo, pero ¿cómo lo haría para que el estilo que se declara dentro de '' de digamos StyledPressable en este ejemplo sea igual al buttonStyle pasado? ¿apuntalar?
Dado que estoy aprendiendo componentes con estilo, estoy muy abierto a cualquier otra forma de lograr este comportamiento mientras uso componentes con estilo.
import styled from "styled-components/native" const Pressable = styled.Pressable(props => (props.buttonStyle)) export default function App() { return ( <View style={styles.container}> <Pressable buttonStyle={{ backgroundColor: "pink" }}> <Text>This is button</Text> </Pressable> </View> ); }La respuesta de Inder usando algo de Typescript.
import styled from "styled-components/native" interface PressableProps { buttonStyle?: CSSObject } const Pressable = styled.Pressable<PressableProps>({ buttonStyle }) => buttonStyle) export default function App() { return ( <View style={styles.container}> <Pressable buttonStyle={{ backgroundColor: "pink" }}> <Text>This is button</Text> </Pressable> </View> ); }