1npm install --save styled-components
2
3# yarn 
4yarn add styled-components

1import styled from 'styled-components'
2
3const RedText = styled.p`
4  color: red;
5`
6
7class App extends Component {}

1const Button = styled.button`
2  background: transparent;
3  border-radius: 3px;
4  border: 2px solid palevioletred;
5  color: palevioletred;
6  margin: 0.5em 1em;
7  padding: 0.25em 1em;
8
9  ${props => props.primary && css`
10    background: palevioletred;
11    color: white;
12  `}
13`;
14
15const Container = styled.div`
16  text-align: center;
17`
18
19render(
20  <Container>
21    <Button>Normal Button</Button>
22    <Button primary>Primary Button</Button>
23  </Container>
24);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>);
25/**
26 * Reset the text fill color so that placeholder is visible
27 */
28.npm__react-simple-code-editor__textarea:empty {
29  -webkit-text-fill-color: inherit !important;
30}
31
32/**
33 * Hack to apply on some CSS on IE10 and IE11
34 */
35@media all and (-ms-high-contrast: none), (-ms-high-contrast: active) {
36  /**
37    * IE doesn't support '-webkit-text-fill-color'
38    * So we use 'color: transparent' to make the text transparent on IE
39    * Unlike other browsers, it doesn't affect caret color in IE
40    */
41  .npm__react-simple-code-editor__textarea {
42    color: transparent !important;
43  }
44
45  .npm__react-simple-code-editor__textarea::selection {
46    background-color: #accef7 !important;
47    color: transparent !important;
48  }
49}
50Normal ButtonPrimary Button

1npm install --save styled-components
2

1render() {
2  return (
3    <RedText>
4      Example Text
5    </RedText>
6  );
7}