timsully · December 5, 2019 06:54 · Dec 5, 2019
diff --git a/props-styled-components.jsx b/props-styled-components.jsx
@@ -0,0 +1,26 @@
+// You can pass a function to your style declarations with one parameter which is component's
+// props. You can then use props to adjust your styling.
+import React from 'react'
+import ReactDOM from 'react-dom'
+import styled from 'styled-components'
+
+const StyledButton = styled.button`
+    border-radius: 5px;
+    background-color: ${props => (props.secondary ? '#F7A072' : '#a1cdf1')};
+    color: #fff;
+    padding: 10px 15px;
+    outline: none;
+    border: none;
+    cursor: pointer;
+    margin: 15px;
+`
+
+
+const Application = () => {
+    return (
+        <div>
+            <StyledButton>Click me</StyledButton>
+            <StyledButton secondary>Click for secondary Action</StyledButton>
+        </div>
+    )
+}
diff --git a/styled-components-example.jsx b/styled-components-example.jsx
@@ -0,0 +1,17 @@
+// Basic Usage of Styled-Components
+import React from 'react'
+import styled from 'styled-components'
+
+const StyledButton = styled.button`
+    border-radius: 5px;
+    background-color: #a1cdf1;
+    color #fff;
+    padding: 10px 15px;
+    outline: none;
+    border: none;
+    cursor: pointer;
+`
+
+const Application = () => {
+    return <StyledButton onClick={() => console.log('clicked')}>Click me</StyledButton>
+}