styled-components example 1 with props
// Create an Input component that'll render an <input> tag with some styles const Input = styled.input` padding: 0.5em; margin: 0.5em; color: ${props => props.inputColor || "palevioletred"}; background: papayawhip; border: none; border-radius: 3px; `; // Render a styled text input with the standard input color, and one with a custom input color render( <div> <Input defaultValue="@probablyup" type="text" /> <Input defaultValue="@geelen" type="text" inputColor="rebeccapurple" /> </div> );// Create an Input component that'll render an <input> tag with some stylesconst Input = styled.input` padding: 0.5em; margin: 0.5em; color: ${props => props.inputColor || "palevioletred"}; background: papayawhip; border: none; border-radius: 3px;`; // Render a styled text input with the standard input color, and one with a custom input colorrender( <div> <Input defaultValue="@probablyup" type="text" /> <Input defaultValue="@geelen" type="text" inputColor="rebeccapurple" /> </div>); /** * Reset the text fill color so that placeholder is visible */ .npm__react-simple-code-editor__textarea:empty { -webkit-text-fill-color: inherit !important; } /** * Hack to apply on some CSS on IE10 and IE11 */ @media all and (-ms-high-contrast: none), (-ms-high-contrast: active) { /** * IE doesn't support '-webkit-text-fill-color' * So we use 'color: transparent' to make the text transparent on IE * Unlike other browsers, it doesn't affect caret color in IE */ .npm__react-simple-code-editor__textarea { color: transparent !important; } .npm__react-simple-code-editor__textarea::selection { background-color: #accef7 !important; color: transparent !important; } }
