-
-
Save Iamhere/ad8ea8f0b801d0a4fe2e1cdfbf3e0098 to your computer and use it in GitHub Desktop.
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| /*[1]*/import {TextField} from 'material-ui' | |
| // TextField merge props for inner components (outer props and internal props) | |
| <TextField | |
| ownProps={ownProps} | |
| inputProps={{ style: { color: 'black' } }} | |
| placeholderProps={{ style: { color: 'gray' } }} | |
| /> | |
| // VS | |
| /*[2]*/import {InputProvider, PlaceHolderProvider, TextField} from 'material-ui' | |
| // Each component have consumer and merge context and props from TextField | |
| <InputProvider style={{ color: 'black' }}> | |
| <PlaceHolderProvider style={{ color: 'gray' }}> | |
| <TextField ownProps={ownProps}/> | |
| </PlaceHolderProvider> | |
| </InputProvider> | |
| // VS | |
| /*[3]*/import {Input, PlaceHolder, TextField} from 'material-ui' | |
| // Each component have consumer (for receive context from TextField) and merge context and props | |
| <TextField | |
| ownProps={ownProps} | |
| input={() => <Input style={{ color: 'black' }} value={value} />} | |
| placeholder={() => <PlaceHolder style={{ color: 'gray' }} />} | |
| /> | |
| // VS | |
| /*[4]*/import {Input, PlaceHolder, TextField} from 'material-ui' | |
| // "render-props" - programmer merge props for component | |
| <TextField | |
| ownProps={ownProps} | |
| input={props => <Input {...props} style={{ ...props.color, color: 'black' }} />} | |
| placeholder={props => <PlaceHolder {...props} style={{ ...props.color, color: 'gray' }} />} | |
| /> |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment