💥 Global Styles

Global Styles
SaishJ · Oct 3, 2022 · 9eca330 · 9eca330
1 parent 4c4fa61
commit 9eca330
Show file tree

Hide file tree

Showing 2 changed files with 19 additions and 1 deletion.
diff --git a/README.md b/README.md
@@ -11,3 +11,5 @@
 5. [Pass Props and Adding Attributes](https://github.com/SaishJ/React-Styled-Components/commit/8f539b92b7f699a2b25d967373270eae1da6e7ea)
 
 6. [Animations](https://github.com/SaishJ/React-Styled-Components/commit/c8331ef90df567127673490e00ffd3c48858667a)
+
+7. [Theming](https://github.com/SaishJ/React-Styled-Components/commit/4c4fa61c670ec1a7762e16525fbb3980f00516eb)
diff --git a/src/App.js b/src/App.js
@@ -1,7 +1,7 @@
 import "./App.css";
 import logo from "./logo.svg";
 // import styled from "styled-components";
-import { ThemeProvider } from "styled-components";
+import { ThemeProvider, createGlobalStyle } from "styled-components";
 import StyledButton, {
   FancyButton,
   SubmitButton,
@@ -32,11 +32,27 @@ const theme = {
     primary: "#fff",
     text: "#000",
   },
+  fontFamily: "Segoe UI",
 };
 
+// Gloabl Styles with props
+const GlobalStyles = createGlobalStyle`
+  button {
+    font-family: ${(props) => props.theme.fontFamily}
+  }
+`;
+
+// Gloabl Styles without props
+// const GloablStyles = createGlobalStyle`
+//   button {
+//     font-family: 'Roboto';
+//   }
+// `;
+
 function App() {
   return (
     <ThemeProvider theme={theme}>
+      <GlobalStyles />
       <div className="App">
         <AnimatedLogo src={logo} />
         <div>