リアクションコンポーネントをスタイルする方法

Question

私はレフィックスフォームを得ました。これはかなり悪くなります。私は何とかそれをスタイルにしたい、私のプロジェクトはモジュラーCSSローダーを使用しています。それから私は私が入力要素ということを利用したいコンポーネントにインポートする必要が

import styled from 'styled-components'; 

const Input = styled.input` 
    color: #41addd; 

    &:hover { 
    color: #6cc0e5; 
    } 
`; 

export default Input ; 

：それは次のようになります。

しかし、redux-formは、Fieldと呼ばれるビルドインコンポーネントを使用します。

import { Field, reduxForm } from 'redux-form'; 

     <Field 
     name="firstName" 
     component="input" 
     type="text" 
     placeholder="First Name" 
     /> 

そして、私は私のcustomly InputスタイルとFieldを置き換えるならば、フォームは、もはや動作しません。

どうすれば対応できますか？ Fieldコンポーネントのスタイルを設定するにはどうすればよいですか？

ありがとうございます。

Answer 1

styled-componentsには、この場合に特別な機能があります。あなたの例では、そのようになります：

import styled from 'styled-components'; 
import { Field, reduxForm } from 'redux-form'; 

const StyledField = styled(Field)` 
    color: #41addd; 

    &:hover { 
    color: #6cc0e5; 
    } 
`; 

<StyledField 
    name="firstName" 
    component="input" 
    type="text" 
    placeholder="First Name" 
/>