Style textinput
This commit is contained in:
		
							parent
							
								
									f28b5b1c50
								
							
						
					
					
						commit
						00c2440163
					
				
							
								
								
									
										9
									
								
								src/components/TextInput.css
									
									
									
									
									
										Normal file
									
								
							
							
						
						
									
										9
									
								
								src/components/TextInput.css
									
									
									
									
									
										Normal file
									
								
							@ -0,0 +1,9 @@
 | 
				
			|||||||
 | 
					.area {
 | 
				
			||||||
 | 
					  box-sizing: border-box;
 | 
				
			||||||
 | 
					  width: 100%;
 | 
				
			||||||
 | 
					  height: 300px;
 | 
				
			||||||
 | 
					}
 | 
				
			||||||
 | 
					
 | 
				
			||||||
 | 
					.load {
 | 
				
			||||||
 | 
					  width: 100%;
 | 
				
			||||||
 | 
					}
 | 
				
			||||||
@ -3,6 +3,8 @@ import { useDispatch } from 'react-redux'
 | 
				
			|||||||
 | 
					
 | 
				
			||||||
import { setText } from '../store/actions.js'
 | 
					import { setText } from '../store/actions.js'
 | 
				
			||||||
 | 
					
 | 
				
			||||||
 | 
					import styles from './TextInput.css'
 | 
				
			||||||
 | 
					
 | 
				
			||||||
const lorem =
 | 
					const lorem =
 | 
				
			||||||
  'Excepteur aliqua cupidatat ullamco laboris cupidatat elit sint cillum incididunt. Anim sit excepteur laboris commodo ullamco consequat tempor. Velit elit eiusmod aute aliquip amet sunt minim deserunt voluptate esse ea sint. Commodo ipsum dolor dolor Lorem et consectetur minim ut in voluptate. Nulla qui consectetur nostrud sint anim minim duis qui amet. Ipsum reprehenderit eiusmod quis Lorem. Consectetur ipsum quis incididunt proident ea sit mollit veniam in excepteur.'
 | 
					  'Excepteur aliqua cupidatat ullamco laboris cupidatat elit sint cillum incididunt. Anim sit excepteur laboris commodo ullamco consequat tempor. Velit elit eiusmod aute aliquip amet sunt minim deserunt voluptate esse ea sint. Commodo ipsum dolor dolor Lorem et consectetur minim ut in voluptate. Nulla qui consectetur nostrud sint anim minim duis qui amet. Ipsum reprehenderit eiusmod quis Lorem. Consectetur ipsum quis incididunt proident ea sit mollit veniam in excepteur.'
 | 
				
			||||||
 | 
					
 | 
				
			||||||
@ -12,10 +14,13 @@ export const TextInput = () => {
 | 
				
			|||||||
  return (
 | 
					  return (
 | 
				
			||||||
    <div>
 | 
					    <div>
 | 
				
			||||||
      <textarea
 | 
					      <textarea
 | 
				
			||||||
 | 
					        className={styles.area}
 | 
				
			||||||
        defaultValue={text}
 | 
					        defaultValue={text}
 | 
				
			||||||
        onInput={e => setTextState(e.target.value)}
 | 
					        onInput={e => setTextState(e.target.value)}
 | 
				
			||||||
      ></textarea>
 | 
					      ></textarea>
 | 
				
			||||||
      <button onClick={() => dispatch(setText(text))}>Load</button>
 | 
					      <button className={styles.load} onClick={() => dispatch(setText(text))}>
 | 
				
			||||||
 | 
					        Load
 | 
				
			||||||
 | 
					      </button>
 | 
				
			||||||
    </div>
 | 
					    </div>
 | 
				
			||||||
  )
 | 
					  )
 | 
				
			||||||
}
 | 
					}
 | 
				
			||||||
 | 
				
			|||||||
		Loading…
	
	
			
			x
			
			
		
	
		Reference in New Issue
	
	Block a user