0

Estou utilizando este componente para utilizar um input com máscara no meu aplicativo, porém eu gostaria que ele tivesse o mesmo estilo que o meu Input no meu styled-components:

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

Eu tentei algo como:

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

Porém eu recebo:

_styledComponents.dfault.TextInputMask is not a function. Components.default.TextInputMask is undefined

2
  • eu não consegui entender bem o que é "styled component", mas o textinputmask aceita style como props, basta vc colocar os estilos que quiser e vai funcionar Commented 11/08/2019 às 16:42
  • styled-components.com Commented 13/08/2019 às 11:28

1 Resposta 1

1

Olá, você deve importar seu componente na sua pasta de styled-components e então exportar para o arquivo que deseja utilizar.

Ex: NA PASTA DO STYLED-COMPONENT

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;

Agora é só importar o NomeQueVoceQuer para o arquivo que for usar.

Você deve fazer log-in para responder a esta pergunta.

Esta não é a resposta que você está procurando? Pesquise outras perguntas com a tag .