styled-components css code example
Example 1: styled componets npm
npm i styled-components
Example 2: styled-components
npm install --save styled-components
# yarn
yarn add styled-components
Example 3: styled components attrs
export const TextInputElement = styled.TextInput.attrs(props => ({
placeholderTextColor: props.ColorPlaceholder,
}))`
font-size: 15px;
line-height: 18px;
color: '#000';
`;
Example 4: styled components
const Button = styled.button`
background: transparent;
border-radius: 3px;
border: 2px solid palevioletred;
color: palevioletred;
margin: 0.5em 1em;
padding: 0.25em 1em;
${props => props.primary && css`
background: palevioletred;
color: white;
`}
`;
const Container = styled.div`
text-align: center;
`
render(
<Container>
<Button>Normal Button</Button>
<Button primary>Primary Button</Button>
</Container>
);const Button = styled.button` background: transparent; border-radius: 3px; border: 2px solid palevioletred; color: palevioletred; margin: 0.5em 1em; padding: 0.25em 1em; ${props => props.primary && css` background: palevioletred; color: white; `}`;const Container = styled.div` text-align: center;`render( <Container> <Button>Normal Button</Button> <Button primary>Primary Button</Button> </Container>);
/**
* 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;
}
}
Normal ButtonPrimary Button