styled-components
npm install --save styled-components
# yarn
yarn add styled-componentsstyled-components
npm install --save styled-components
# yarn
yarn add styled-componentsstyled components
import styled from 'styled-components'
const RedText = styled.p`
color: red;
`
class App extends Component {}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 Buttonstyled components
npm install --save styled-componentsstyled components
render() {
return (
<RedText>
Example Text
</RedText>
);
}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
