Styled-components: input redux-form?

[chabanov]

Redux-Form styled.input``?

[mxstbr]

Sorry what's the question here?

[k15a]

I think you want:

import { Field } from 'redux-form'
import styled from 'styled-components'

const Input = styled(Field)`
  /* You CSS */
`

https://github.com/styled-components/styled-components#third-party-components

[vadimshvetsov]

Solution above doesn't cover cases like styling border when error occurs. You need meta object from Field in your styled component props for that. The good way is to set styled component as Field presential component.

const BasicInput = ({ input, ...props }) => <input {...props} {...input}/>;

export const StyledInput = styled(BasicInput)`
  /* another input styles */
  border: 1px solid ${({ meta: { touched, error } }) => (touched && error ? 'red' : 'grey')};
`;

const Input = ({ name, ...props }) => (
  <Field name={name} component={StyledInput} {...props}/>
);

P.S. Do not render StyledInput inside Field component prop. Fat arrow components have not supported since v6 of redux-form.