styled components typescript props code example

Example 1: styled components props typescript

# to prevent typescript error, install this
yarn add @types/styled-components

# NPM
npm install @types/styled-components

Example 2: styled components props typescript

interface YourProps {
  invalid: boolean
}

const Input = styled.input`
  border: ${(p: YourProps) => p.invalid ? 'red' : 'blue'};
`

Example 3: styled components attrs

export const TextInputElement = styled.TextInput.attrs(props => ({
  placeholderTextColor: props.ColorPlaceholder,
}))`
  font-size: 15px;
  line-height: 18px;
  color: '#000';
`;