How to style an imported component using Styled Components

Asked

Viewed 246 times

0

I’m using this component to use a mask input in my application, but I would like it to have the same style as my Input in my Styled-Components:

const Input = styled.TextInput`
  paddingHorizontal: 20px;
  paddingVertical: 15px;
  borderRadius: 5px;
  backgroundColor: #fff;
  alignSelf: stretch;
  marginBottom: 15px;
  marginHorizontal: 20px;
  fontSize: 16px;
`;

I tried something like:

 const TextInputMask= styled.TextInputMask`
  paddingHorizontal: 20px;
  paddingVertical: 15px;
  borderRadius: 5px;
  backgroundColor: #fff;
  alignSelf: stretch;
  marginBottom: 15px;
  marginHorizontal: 20px;
  fontSize: 16px;
`;

But I get:

_styledComponents.dfault.Textinputmask is not a Function. Components.default.Textinputmask is Undefined

react-native styled-components

  • i could not understand well what is "Styled Component", but textinputmask accepts style as props, just vc put the styles you want and it will work

  • https://www.styled-components.com/

1 answer

1


Hello, you must import your component into your styled-components and then export to the file you want to use.

Ex: IN THE STYLED-COMPONENT FOLDER

import {ComponenteImportado} from "ComponenteImportado";

export const NomeQueVoceQuer = styled(ComponenteImportado)
  paddingHorizontal: 20px;
  paddingVertical: 15px;
  borderRadius: 5px;
  backgroundColor: #fff;
  alignSelf: stretch;
  marginBottom: 15px;
  marginHorizontal: 20px;
  fontSize: 16px;

Now just import the Namesign to the file you will use.

Browser other questions tagged react-native styled-components

You are not signed in. Login or sign up in order to post.