styled componets npm
npm i styled-componentsstyled componets npm
npm i styled-componentsstyled components props typescript
# to prevent typescript error, install this
yarn add @types/styled-components
# NPM
npm install @types/styled-componentsstyled component with props
<Separator thin />
const Separator = styled.div`
display: block;
width: 100%;
height: 1px;
margin: ${props => props.thin? '7px auto 0':'10px auto'};
`;
export default Separator;styled components props typescript
interface YourProps {
invalid: boolean
}
const Input = styled.input`
border: ${(p: YourProps) => p.invalid ? 'red' : 'blue'};
`styled componennts
npm install --save styled-componentsnpm install --save styled-componentsstyled-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;
}
}Copyright © 2021 Codeinu
Forgot your account's password or having trouble logging into your Account? Don't worry, we'll help you to get back your account. Enter your email address and we'll send you a recovery link to reset your password. If you are experiencing problems resetting your password contact us
