styled-components and useContext

Author: mauriciogc

src/App.js

@@ -1,5 +1,25 @@
-import React from 'react';
+import React from "react";
 import Component from './components/Component'
 
-const App = () => <div className="App"><Component/></div>;
+//Provider
+import ThemeContext from "./contexts/theme";
+
+const App = () => {
+  const theme = {
+		colors: {
+			primary: "#4A430B",
+			primaryVariant: "#3C3A2D",
+			background: "#F7DF1E",
+			secondary: "#F9EA6F",
+			secondaryVariant: "#FFFFFF"
+		}
+  };
+
+  return (
+    <ThemeContext.Provider value={{ theme }}>
+      <div className="App">
+        <Component/>
+      </div>
+    </ThemeContext.Provider>);
+}
 export default App;

src/components/Component.jsx

@@ -1,11 +1,12 @@
-import React from "react";
+import React, { useContext } from "react";
+import ThemeContext from "../contexts/theme";
 import styled from "styled-components";
 
 const Wrapper = styled.div`
 	padding: 40px;
 	text-align: left;
-	background: #f7df1e;
-	color: #3c3a2d;
+	background-color: ${({ theme }) => theme.colors.background};
+	color: ${({ theme }) => theme.colors.primaryVariant};
 `;
 
 const Title = styled.h1`
@@ -19,14 +20,14 @@ const Paragraph = styled.p`
 const Button = styled.button`
 	font-size: 14px;
 	font-weight: 400;
-	background-color: #4a430b;
+	background-color: ${({ theme }) => theme.colors.primary};
 	border: none;
 	cursor: pointer;
-	color: #ffffff;
+	color: ${({ theme }) => theme.colors.secondaryVariant};
 	padding: 10px 20px;
 	border-radius: 4px;
 	&:hover {
-		background-color: #342f08;
+		background-color: ${({ theme }) => theme.colors.primaryVariant};
 	}
 `;
 const Link = styled.a`
@@ -35,23 +36,25 @@ const Link = styled.a`
 	background-color: transparent;
 	border: none;
 	cursor: pointer;
-	color: #3c3a2d;
+	color: ${({ theme }) => theme.colors.primaryVariant};
 	padding: 10px 20px;
 	border-radius: 4px;
 `;
 
 const Component = props => {
+	const { theme } = useContext(ThemeContext);
+
 	return (
-		<Wrapper>
+		<Wrapper theme={theme}>
 			<Title>Example component CSS</Title>
 			<Paragraph>
 				Lorem ipsum, dolor sit amet consectetur adipisicing elit. Ducimus,
 				temporibus labore voluptatibus aspernatur illo ad id sit nulla, a atque
 				doloribus itaque ab? Soluta, exercitationem illum provident quod iure
 				numquam?
 			</Paragraph>
-			<Button>I'm a button</Button>
-			<Link href="/#" onClick={e => e.preventDefault()}>
+			<Button theme={theme}>I'm a button</Button>
+			<Link href="/#" onClick={e => e.preventDefault()} theme={theme}>
 				I'm a link
 			</Link>
 		</Wrapper>

src/contexts/theme.js

@@ -0,0 +1,3 @@
+import React from "react";
+
+export default React.createContext();