Reactライブラリの子要素スタイルにどのように影響を与えますか？

Question

私はリアクションのためのマテリアルライブラリを使用しています。私はそれが含まれているグリッドシステム内に収まるように、日付ピッカーの幅に影響を与えようとしています。

<DatePicker hintText="Set Date" mode="landscape" style={{width: '100%'}}/> 

ルートスタイルをオーバーライドすると、レンダリングされた要素の残りの部分だけがdivになりますが、実際の要素には影響しません。

これは私がレンダリングされたものです：（簡体字）

<div style="width="100%";"> 
    <div style="width="256px"> 
     <input> 
    </div> 
</div> 

がどのように私はこのようなライブラリーからネストされた要素に影響を与えていますか？

Answer 1

これはライブラリの実装によって異なります。一般的に広く使用されているライブラリの場合、まともなドキュメントがあります。

特定のユースケースに答えるために、コードはmaterial-ui datepicker（https://github.com/callemall/material-ui/blob/master/src/DatePicker/DatePicker.js）でも利用できます。ここからわかるように、 'className'プロパティを受け入れ、コンポーネントのルートdivに追加します。

<DatePicker hintText="Set Date" mode="landscape" className='full-width'/> 

.full-width { 
    width: 100% 
} 

スタイルプロパティを受け入れ、ルートdivに追加することに注意してください。

私はあなたが実際にそれを内部テキストフィールドに追加したいと思っていますが、そのためには "textFieldStyle"がプロパティです。日付選択コンテ​​ナの場合は "dialogContainerStyle"です。しかし、私はあなたがコードからそれの要点を得ると思う。

Answer 2

リアクションコンポーネントを使用していて、子要素のスタイルに影響を与えたい場合は、親コンポーネントの小道具としてスタイルを渡し、子コンポーネントに適用する必要があります。

親要素は次のようになる： - ：

render(){ return (<Child style ={this.props.styleObject} />); }

- <Parent childStyle={styleObject} />

親のレンダリング機能は次のようになります