Welcome to React
\\n\\n To get started, edit src/App.js and save to\\n reload.\\n
\\n To get started, edit src/App.js and save to\\n reload.\\n
\\n To get started, edit src/App.js and save to\\n reload.\\n
\"), \" tags something like:\"), mdx(\"pre\", null, mdx(\"code\", _extends({\n parentName: \"pre\"\n }, {\n \"className\": \"language-js\"\n }), \"const CodeWrapper = styled.code`\\n font-size: 1.3rem;\\n`\\n\")), mdx(\"p\", null, \"But if you prefer you can nest selectors within the component, like:\"), mdx(\"pre\", null, mdx(\"code\", _extends({\n parentName: \"pre\"\n }, {\n \"className\": \"language-js\"\n }), \"const AppIntro = styled.p`\\n color: ${props => props.theme.dark};\\n font-size: large;\\n code {\\n font-size: 1.3rem;\\n }\\n`\\n\")), mdx(\"p\", null, \"Let\\u2019s have a look at the \", mdx(\"inlineCode\", {\n parentName: \"p\"\n }, \"render()\"), \" method now\\u2026\"), mdx(\"pre\", null, mdx(\"code\", _extends({\n parentName: \"pre\"\n }, {\n \"className\": \"language-js\"\n }), \"render() {\\n return (\\n \\n \\n Welcome to React \\n \\n \\n Bootstrapped with create-react-app.\\n \\n \\n Components styled with styled-components{' '}\\n \\n \\n )\\n}\\n\")), mdx(\"p\", null, \"Now all the classes originally used in \", mdx(\"inlineCode\", {\n parentName: \"p\"\n }, \"App.js\"), \" have been replaced so\\nthere\\u2019s no need for the \", mdx(\"inlineCode\", {\n parentName: \"p\"\n }, \"import './App.css'\"), \" mapping, remove that\\naaaaand! Still no change!! Which is a good thing because at the moment\\nwe\\u2019re swapping out the \", mdx(\"inlineCode\", {\n parentName: \"p\"\n }, \".css\"), \" files for styled-components.\"), mdx(\"p\", null, \"Cool, we have now replaced all the css with styled-components, now we\\ncan take a look at \", mdx(\"inlineCode\", {\n parentName: \"p\"\n }, \"injectGlobal\"), \".\"), mdx(\"p\", null, \"Let\\u2019s take a look at how the \", mdx(\"inlineCode\", {\n parentName: \"p\"\n }, \"App.js\"), \" file should look before we move\\non:\"), mdx(\"pre\", null, mdx(\"code\", _extends({\n parentName: \"pre\"\n }, {\n \"className\": \"language-js\"\n }), \"import React, { Component } from 'react'\\nimport styled, { keyframes } from 'styled-components'\\nimport logo from './logo.svg'\\n\\nconst AppWrapper = styled.div`\\n text-align: center;\\n`\\n\\nconst rotate360 = keyframes`\\n from {\\n transform: rotate(0deg);\\n }\\n to {\\n transform: rotate(360deg);\\n }\\n`\\n\\nconst AppLogo = styled.img`\\n animation: ${rotate360} infinite 120s linear;\\n height: 80px;\\n &:hover {\\n animation: ${rotate360} infinite 1.5s linear;\\n }\\n`\\n\\nconst AppHeader = styled.div`\\n background-color: #222;\\n height: 12rem;\\n padding: 1rem;\\n color: white;\\n`\\n\\nconst AppTitle = styled.h1`\\n font-weight: 900;\\n`\\n\\nconst AppIntro = styled.p`\\n font-size: large;\\n code {\\n font-size: 1.3rem;\\n }\\n`\\n\\nconst EmojiWrapper = styled.span.attrs({\\n role: 'img',\\n})``\\n\\nclass App extends Component {\\n render() {\\n return (\\n \\n \\n Welcome to React \\n \\n \\n Bootstrapped with create-react-app.\\n \\n \\n Components styled with styled-components{' '}\\n \\n \\n )\\n }\\n}\\n\\nexport default App\\n\")), mdx(\"h3\", {\n \"id\": \"style-the-body-with-injectglobal\",\n \"style\": {\n \"position\": \"relative\"\n }\n }, mdx(\"a\", _extends({\n parentName: \"h3\"\n }, {\n \"href\": \"#style-the-body-with-injectglobal\",\n \"aria-label\": \"style the body with injectglobal permalink\",\n \"className\": \"anchor before\"\n }), mdx(\"svg\", _extends({\n parentName: \"a\"\n }, {\n \"aria-hidden\": \"true\",\n \"focusable\": \"false\",\n \"height\": \"16\",\n \"version\": \"1.1\",\n \"viewBox\": \"0 0 16 16\",\n \"width\": \"16\"\n }), mdx(\"path\", _extends({\n parentName: \"svg\"\n }, {\n \"fillRule\": \"evenodd\",\n \"d\": \"M4 9h1v1H4c-1.5 0-3-1.69-3-3.5S2.55 3 4 3h4c1.45 0 3 1.69 3 3.5 0 1.41-.91 2.72-2 3.25V8.59c.58-.45 1-1.27 1-2.09C10 5.22 8.98 4 8 4H4c-.98 0-2 1.22-2 2.5S3 9 4 9zm9-3h-1v1h1c1 0 2 1.22 2 2.5S13.98 12 13 12H9c-.98 0-2-1.22-2-2.5 0-.83.42-1.64 1-2.09V6.25c-1.09.53-2 1.84-2 3.25C6 11.31 7.55 13 9 13h4c1.45 0 3-1.69 3-3.5S14.5 6 13 6z\"\n })))), \"Style the body with injectGlobal\"), mdx(\"p\", null, \"For styling the body of our react app we currently have the\\n\", mdx(\"inlineCode\", {\n parentName: \"p\"\n }, \"index.css\"), \" file that is being imported into the mounting point of our\\napp in the \", mdx(\"inlineCode\", {\n parentName: \"p\"\n }, \"index.js\"), \" file.\"), mdx(\"p\", null, \"To style the body we can use \", mdx(\"a\", _extends({\n parentName: \"p\"\n }, {\n \"href\": \"https://www.styled-components.com/docs/api#injectglobal\",\n \"target\": \"_blank\",\n \"rel\": \"noopener\"\n }), mdx(\"inlineCode\", {\n parentName: \"a\"\n }, \"injectGlobal\")), \" from styled-components\\nwhich adds the styles directly to the stylesheet.\"), mdx(\"p\", null, \"To do this you bring in the \", mdx(\"inlineCode\", {\n parentName: \"p\"\n }, \"injectGolabl\"), \" named export from\\nstyled-components and add your styles between the back ticks.\"), mdx(\"p\", null, \"The current \", mdx(\"inlineCode\", {\n parentName: \"p\"\n }, \"index.css\"), \" looks like this:\"), mdx(\"pre\", null, mdx(\"code\", _extends({\n parentName: \"pre\"\n }, {\n \"className\": \"language-css\"\n }), \"body {\\n padding: 0;\\n margin: 0;\\n font-family: sans-serif;\\n}\\n\")), mdx(\"p\", null, \"Let\\u2019s add a \", mdx(\"inlineCode\", {\n parentName: \"p\"\n }, \"theme\"), \" folder in the \", mdx(\"inlineCode\", {\n parentName: \"p\"\n }, \"src\"), \" directory and add a\\n\", mdx(\"inlineCode\", {\n parentName: \"p\"\n }, \"globalStyle.js\"), \" file where we can keep all our styles we want to use\\nthroughout the app, keeping the styles on one place will make changes\\nsimpler.\"), mdx(\"p\", null, \"In \", mdx(\"inlineCode\", {\n parentName: \"p\"\n }, \"src/theme/globalStyle.js\"), \" we\\u2019ll need to import the \", mdx(\"inlineCode\", {\n parentName: \"p\"\n }, \"injectGlobal\"), \"\\nnamed export from styled-components and add the \", mdx(\"inlineCode\", {\n parentName: \"p\"\n }, \"index.css\"), \" styles\\ninto it:\"), mdx(\"pre\", null, mdx(\"code\", _extends({\n parentName: \"pre\"\n }, {\n \"className\": \"language-js\"\n }), \"import { injectGlobal } from 'styled-components'\\n\\ninjectGlobal`\\n body {\\n padding: 0;\\n margin: 0;\\n font-family: sans-serif;\\n }\\n`\\n\")), mdx(\"p\", null, \"Ok, now we\\u2019re adding the body style to the stylesheet directly so\\nthere is no need for the \", mdx(\"inlineCode\", {\n parentName: \"p\"\n }, \"index.css\"), \" file mapping that is in\\n\", mdx(\"inlineCode\", {\n parentName: \"p\"\n }, \"index.js\"), \" it should look like this now:\"), mdx(\"pre\", null, mdx(\"code\", _extends({\n parentName: \"pre\"\n }, {\n \"className\": \"language-js\"\n }), \"import React from 'react' import ReactDOM from 'react-dom'\\n\\nimport App from './App'\\n\\nimport registerServiceWorker from './registerServiceWorker'\\n\\nReactDOM.render(\"), \"\\u2019s to use the same font we can add\\nthat to the injectGlobal in our \", mdx(\"inlineCode\", {\n parentName: \"p\"\n }, \"globalStyle.js\"), \" module.\"), mdx(\"pre\", null, mdx(\"code\", _extends({\n parentName: \"pre\"\n }, {\n \"className\": \"language-js\"\n }), \"injectGlobal`\\n @import url(\\u2018https://fonts.googleapis.com/css?family=Montserrat:400,900|Roboto');\\n body {\\n padding: 0;\\n margin: 0;\\n font-family: Roboto, sans-serif;\\n }\\n h1 {\\n font-family: Montserrat;\\n }\\n`\\n\")), mdx(\"p\", null, \"Then we can adjust the weight on the \", mdx(\"inlineCode\", {\n parentName: \"p\"\n }, \"AppTitle\"), \" component:\"), mdx(\"pre\", null, mdx(\"code\", _extends({\n parentName: \"pre\"\n }, {\n \"className\": \"language-js\"\n }), \"const AppTitle = styled.h1`\\n font-weight: 900;\\n`\\n\")), mdx(\"p\", null, \"To add the additional styles for fonts like Montserrat and Roboto you\\ncan specify them in the \", mdx(\"inlineCode\", {\n parentName: \"p\"\n }, \"@import url()\"), \" you\\u2019ll notice that Montserrat\\nhas \", mdx(\"inlineCode\", {\n parentName: \"p\"\n }, \":400,900\"), \" after it that is specifying the styles regular (400)\\nand black (900), you can import as many as you like from Google fonts\\n(CDN) but the more you import the longer it will take to load them, if\\nyou have a lot of fonts and styles you want in your app then consider\\nadding them to a folder in the project, like:\"), mdx(\"pre\", null, mdx(\"code\", _extends({\n parentName: \"pre\"\n }, {\n \"className\": \"language-js\"\n }), \"import Montserrat from './fonts/Montserrat-Regular.ttf'\\n\\ninjectGlobal`@font-face { font-family: Montserrat; src: url(${Montserrat}); }`\\n\")), mdx(\"h3\", {\n \"id\": \"theming\",\n \"style\": {\n \"position\": \"relative\"\n }\n }, mdx(\"a\", _extends({\n parentName: \"h3\"\n }, {\n \"href\": \"#theming\",\n \"aria-label\": \"theming permalink\",\n \"className\": \"anchor before\"\n }), mdx(\"svg\", _extends({\n parentName: \"a\"\n }, {\n \"aria-hidden\": \"true\",\n \"focusable\": \"false\",\n \"height\": \"16\",\n \"version\": \"1.1\",\n \"viewBox\": \"0 0 16 16\",\n \"width\": \"16\"\n }), mdx(\"path\", _extends({\n parentName: \"svg\"\n }, {\n \"fillRule\": \"evenodd\",\n \"d\": \"M4 9h1v1H4c-1.5 0-3-1.69-3-3.5S2.55 3 4 3h4c1.45 0 3 1.69 3 3.5 0 1.41-.91 2.72-2 3.25V8.59c.58-.45 1-1.27 1-2.09C10 5.22 8.98 4 8 4H4c-.98 0-2 1.22-2 2.5S3 9 4 9zm9-3h-1v1h1c1 0 2 1.22 2 2.5S13.98 12 13 12H9c-.98 0-2-1.22-2-2.5 0-.83.42-1.64 1-2.09V6.25c-1.09.53-2 1.84-2 3.25C6 11.31 7.55 13 9 13h4c1.45 0 3-1.69 3-3.5S14.5 6 13 6z\"\n })))), \"Theming\"), mdx(\"p\", null, \"Themes are often used to change the look and feel of a wide range of\\nthings at once. For example, you may have a night and day mode like in\\nTwitter. You can create your own themes in styled-components too.\"), mdx(\"p\", null, mdx(\"img\", _extends({\n parentName: \"p\"\n }, {\n \"src\": \"https://thepracticaldev.s3.amazonaws.com/i/gwn8czgagns1n1545zgn.png\",\n \"alt\": null\n }))), mdx(\"h3\", {\n \"id\": \"use-the-styled-components-themeprovider\",\n \"style\": {\n \"position\": \"relative\"\n }\n }, mdx(\"a\", _extends({\n parentName: \"h3\"\n }, {\n \"href\": \"#use-the-styled-components-themeprovider\",\n \"aria-label\": \"use the styled components themeprovider permalink\",\n \"className\": \"anchor before\"\n }), mdx(\"svg\", _extends({\n parentName: \"a\"\n }, {\n \"aria-hidden\": \"true\",\n \"focusable\": \"false\",\n \"height\": \"16\",\n \"version\": \"1.1\",\n \"viewBox\": \"0 0 16 16\",\n \"width\": \"16\"\n }), mdx(\"path\", _extends({\n parentName: \"svg\"\n }, {\n \"fillRule\": \"evenodd\",\n \"d\": \"M4 9h1v1H4c-1.5 0-3-1.69-3-3.5S2.55 3 4 3h4c1.45 0 3 1.69 3 3.5 0 1.41-.91 2.72-2 3.25V8.59c.58-.45 1-1.27 1-2.09C10 5.22 8.98 4 8 4H4c-.98 0-2 1.22-2 2.5S3 9 4 9zm9-3h-1v1h1c1 0 2 1.22 2 2.5S13.98 12 13 12H9c-.98 0-2-1.22-2-2.5 0-.83.42-1.64 1-2.09V6.25c-1.09.53-2 1.84-2 3.25C6 11.31 7.55 13 9 13h4c1.45 0 3-1.69 3-3.5S14.5 6 13 6z\"\n })))), \"Use the styled-components ThemeProvider\"), mdx(\"p\", null, \"Now say we want to have several components in our app that use a CSS\\ncolour property \", mdx(\"inlineCode\", {\n parentName: \"p\"\n }, \"color: #6e27c5\"), \" instead of hard coding it through the\\napp for every component that uses it we can use the styled-components\\n\", mdx(\"inlineCode\", {\n parentName: \"p\"\n }, \"ThemeProvider\"), \".\"), mdx(\"p\", null, \"For this we will need to import the \", mdx(\"inlineCode\", {\n parentName: \"p\"\n }, \"ThemeProvider\"), \" named export from\\nstyled-components, then define a \", mdx(\"inlineCode\", {\n parentName: \"p\"\n }, \"theme\"), \" object where our colour is\\ngoing to live:\"), mdx(\"pre\", null, mdx(\"code\", _extends({\n parentName: \"pre\"\n }, {\n \"className\": \"language-js\"\n }), \"export const theme = {\\n primary: '#6e27c5',\\n}\\n\")), mdx(\"p\", null, \"Let\\u2019s add the newly created \", mdx(\"inlineCode\", {\n parentName: \"p\"\n }, \"theme\"), \" to the \", mdx(\"inlineCode\", {\n parentName: \"p\"\n }, \"globalStyle\"), \" module we\\ncreated previously.\"), mdx(\"p\", null, \"To make the theme object available throughout the app component we\\u2019ll\\nwrap our app component in the \", mdx(\"inlineCode\", {\n parentName: \"p\"\n }, \"ThemeProvider\"), \" and import our awesome\\ntheme for use in the \", mdx(\"inlineCode\", {\n parentName: \"p\"\n }, \"ThemeProvider\"), \":\"), mdx(\"pre\", null, mdx(\"code\", _extends({\n parentName: \"pre\"\n }, {\n \"className\": \"language-js\"\n }), \"import React, { Component } from 'react'\\nimport styled, { keyframes, ThemeProvider } from 'styled-components'\\nimport logo from './logo.svg'\\nimport { theme } from './theme/globalStyle'\\n\\n// our styled-components\\n\\nclass App extends Component {\\n render() {\\n return (\\n \\n {/* all children can access the theme object */}\\n \\n )\\n }\\n}\\nexport default App\\n\")), mdx(\"p\", null, \"Now the \", mdx(\"inlineCode\", {\n parentName: \"p\"\n }, \"theme\"), \" properties can be used as props in our\\nstyled-components, let\\u2019s change the \", mdx(\"inlineCode\", {\n parentName: \"p\"\n }, \"background-color:\"), \" in the\\n\", mdx(\"inlineCode\", {\n parentName: \"p\"\n }, \"AppHeader\"), \" component, whilst we\\u2019re at it let\\u2019s add a \", mdx(\"inlineCode\", {\n parentName: \"p\"\n }, \"dark: #222\"), \"\\nproperty to our \", mdx(\"inlineCode\", {\n parentName: \"p\"\n }, \"theme\"), \" object and use that for the \", mdx(\"inlineCode\", {\n parentName: \"p\"\n }, \"color\"), \" property:\"), mdx(\"pre\", null, mdx(\"code\", _extends({\n parentName: \"pre\"\n }, {\n \"className\": \"language-js\"\n }), \"const AppHeader = styled.div`\\n height: 12rem;\\n padding: 1rem;\\n color: ${props => props.theme.dark};\\n background-color: ${props => props.theme.primary};\\n`\\n\")), mdx(\"p\", null, \"Now we can change our app theme globally\"), mdx(\"h3\", {\n \"id\": \"ok-cool-can-you-change-theme\",\n \"style\": {\n \"position\": \"relative\"\n }\n }, mdx(\"a\", _extends({\n parentName: \"h3\"\n }, {\n \"href\": \"#ok-cool-can-you-change-theme\",\n \"aria-label\": \"ok cool can you change theme permalink\",\n \"className\": \"anchor before\"\n }), mdx(\"svg\", _extends({\n parentName: \"a\"\n }, {\n \"aria-hidden\": \"true\",\n \"focusable\": \"false\",\n \"height\": \"16\",\n \"version\": \"1.1\",\n \"viewBox\": \"0 0 16 16\",\n \"width\": \"16\"\n }), mdx(\"path\", _extends({\n parentName: \"svg\"\n }, {\n \"fillRule\": \"evenodd\",\n \"d\": \"M4 9h1v1H4c-1.5 0-3-1.69-3-3.5S2.55 3 4 3h4c1.45 0 3 1.69 3 3.5 0 1.41-.91 2.72-2 3.25V8.59c.58-.45 1-1.27 1-2.09C10 5.22 8.98 4 8 4H4c-.98 0-2 1.22-2 2.5S3 9 4 9zm9-3h-1v1h1c1 0 2 1.22 2 2.5S13.98 12 13 12H9c-.98 0-2-1.22-2-2.5 0-.83.42-1.64 1-2.09V6.25c-1.09.53-2 1.84-2 3.25C6 11.31 7.55 13 9 13h4c1.45 0 3-1.69 3-3.5S14.5 6 13 6z\"\n })))), \"Ok cool, can you change theme?\"), mdx(\"p\", null, \"This is what I was thinking and it turns out you can, there\\u2019s a great\\n\", mdx(\"a\", _extends({\n parentName: \"p\"\n }, {\n \"href\": \"https://stackoverflow.com/a/42899979/1138354\",\n \"target\": \"_blank\",\n \"rel\": \"noopener\"\n }), \"Stack Overflow answer\"), \" from \", mdx(\"a\", _extends({\n parentName: \"p\"\n }, {\n \"href\": \"https://twitter.com/mxstbr\",\n \"target\": \"_blank\",\n \"rel\": \"noopener\"\n }), \"Max\"), \" on it.\"), mdx(\"p\", null, \"It got me thinking if you can switch between themes rather than define\\nthem for different sections like in the SO answer.\"), mdx(\"p\", null, \"I started off by defining two themes (with imaginative names) in the\\n\", mdx(\"inlineCode\", {\n parentName: \"p\"\n }, \"globalStyle.js\"), \" module:\"), mdx(\"pre\", null, mdx(\"code\", _extends({\n parentName: \"pre\"\n }, {\n \"className\": \"language-js\"\n }), \"export const theme1 = {\\n primary: '#ff0198',\\n secondary: '#01c1d6',\\n danger: '#eb238e',\\n light: '#f4f4f4',\\n dark: '#222',\\n}\\n\\nexport const theme2 = {\\n primary: '#6e27c5',\\n secondary: '#ffb617',\\n danger: '#f16623',\\n light: '#f4f4f4',\\n dark: '#222',\\n}\\n\")), mdx(\"p\", null, \"Now we need a way to switch between the two \", mdx(\"inlineCode\", {\n parentName: \"p\"\n }, \"theme\"), \" objects, let\\u2019s use\\na select box for them, let\\u2019s create a components folder and in there\\nmake a \", mdx(\"inlineCode\", {\n parentName: \"p\"\n }, \"ThemeSelect.js\"), \" component, we can worry about refactoring the\\n\", mdx(\"inlineCode\", {\n parentName: \"p\"\n }, \"App.js\"), \" component when I\\u2019m not here :\"), mdx(\"h4\", {\n \"id\": \"themeselectjs\",\n \"style\": {\n \"position\": \"relative\"\n }\n }, mdx(\"a\", _extends({\n parentName: \"h4\"\n }, {\n \"href\": \"#themeselectjs\",\n \"aria-label\": \"themeselectjs permalink\",\n \"className\": \"anchor before\"\n }), mdx(\"svg\", _extends({\n parentName: \"a\"\n }, {\n \"aria-hidden\": \"true\",\n \"focusable\": \"false\",\n \"height\": \"16\",\n \"version\": \"1.1\",\n \"viewBox\": \"0 0 16 16\",\n \"width\": \"16\"\n }), mdx(\"path\", _extends({\n parentName: \"svg\"\n }, {\n \"fillRule\": \"evenodd\",\n \"d\": \"M4 9h1v1H4c-1.5 0-3-1.69-3-3.5S2.55 3 4 3h4c1.45 0 3 1.69 3 3.5 0 1.41-.91 2.72-2 3.25V8.59c.58-.45 1-1.27 1-2.09C10 5.22 8.98 4 8 4H4c-.98 0-2 1.22-2 2.5S3 9 4 9zm9-3h-1v1h1c1 0 2 1.22 2 2.5S13.98 12 13 12H9c-.98 0-2-1.22-2-2.5 0-.83.42-1.64 1-2.09V6.25c-1.09.53-2 1.84-2 3.25C6 11.31 7.55 13 9 13h4c1.45 0 3-1.69 3-3.5S14.5 6 13 6z\"\n })))), \"ThemeSelect.js\"), mdx(\"pre\", null, mdx(\"code\", _extends({\n parentName: \"pre\"\n }, {\n \"className\": \"language-js\"\n }), \"import React from 'react'\\nimport styled from 'styled-components'\\n\\nconst Select = styled.select`\\n margin: 2rem 0.5rem;\\n padding: 0rem 0.5rem;\\n font-family: Roboto;\\n font-size: 1rem;\\n border: 1px solid ${props => props.theme.light};\\n box-shadow: 0px 0px 0px 1px rgba(0, 0, 0, 0.1);\\n background: ${props => props.theme.light};\\n border-radius: 2px;\\n`\\n\\nexport const SelectOpt = styled.option`\\n font-family: Roboto;\\n font-size: 1rem;\\n`\\n\\nclass ThemeSelect extends React.Component {\\n render() {\\n return (\\n \\n \\n \\n )\\n }\\n}\\n\\nexport default ThemeSelect\\n\")), mdx(\"p\", null, \"You\\u2019ve probably noticed the\\n\", mdx(\"inlineCode\", {\n parentName: \"p\"\n }, \"onChange={e => this.props.handleThemeChange(e)\"), \" event, we\\u2019re going to\\nadd that method to the \", mdx(\"inlineCode\", {\n parentName: \"p\"\n }, \"App.js\"), \" component along with some state to\\nmanage what theme is selected.\"), mdx(\"h4\", {\n \"id\": \"appjs\",\n \"style\": {\n \"position\": \"relative\"\n }\n }, mdx(\"a\", _extends({\n parentName: \"h4\"\n }, {\n \"href\": \"#appjs\",\n \"aria-label\": \"appjs permalink\",\n \"className\": \"anchor before\"\n }), mdx(\"svg\", _extends({\n parentName: \"a\"\n }, {\n \"aria-hidden\": \"true\",\n \"focusable\": \"false\",\n \"height\": \"16\",\n \"version\": \"1.1\",\n \"viewBox\": \"0 0 16 16\",\n \"width\": \"16\"\n }), mdx(\"path\", _extends({\n parentName: \"svg\"\n }, {\n \"fillRule\": \"evenodd\",\n \"d\": \"M4 9h1v1H4c-1.5 0-3-1.69-3-3.5S2.55 3 4 3h4c1.45 0 3 1.69 3 3.5 0 1.41-.91 2.72-2 3.25V8.59c.58-.45 1-1.27 1-2.09C10 5.22 8.98 4 8 4H4c-.98 0-2 1.22-2 2.5S3 9 4 9zm9-3h-1v1h1c1 0 2 1.22 2 2.5S13.98 12 13 12H9c-.98 0-2-1.22-2-2.5 0-.83.42-1.64 1-2.09V6.25c-1.09.53-2 1.84-2 3.25C6 11.31 7.55 13 9 13h4c1.45 0 3-1.69 3-3.5S14.5 6 13 6z\"\n })))), \"App.js\"), mdx(\"pre\", null, mdx(\"code\", _extends({\n parentName: \"pre\"\n }, {\n \"className\": \"language-js\"\n }), \"import React, { Component } from 'react'\\nimport styled, { keyframes, ThemeProvider } from 'styled-components'\\n\\nimport logo from './logo.svg'\\n\\nimport { theme1, theme2 } from './theme/globalStyle'\\nimport ThemeSelect from './components/ThemeSelect'\\n\\n// our lovely styled-components here\\n\\nclass App extends Component {\\n state = {\\n theme: theme1,\\n }\\n handleThemeChange = e => {\\n let theme = e.target.value\\n theme === 'theme1' ? (theme = theme1) : (theme = theme2)\\n this.setState({ theme })\\n }\\n render() {\\n return (\\n \\n \\n \\n Welcome to React \\n \\n \\n Bootstrapped with create-react-app.\\n \\n \\n Components styled with styled-components{' '}\\n \\n \\n \\n )\\n }\\n}\\n\\nexport default App\\n\")), mdx(\"p\", null, \"To summarise what we have done with \", mdx(\"inlineCode\", {\n parentName: \"p\"\n }, \"App.js\"), \" here is, add some state\\nto default to theme1 where the two themes are imported as named\\nexports of the \", mdx(\"inlineCode\", {\n parentName: \"p\"\n }, \"globalStyle.js\"), \" module.\"), mdx(\"p\", null, \"Add a method to handle the change of the \", mdx(\"inlineCode\", {\n parentName: \"p\"\n }, \"ThemeSelect.js\"), \" component\\n\", mdx(\"inlineCode\", {\n parentName: \"p\"\n }, \"handleThemeChange\"), \" this is where we can switch between the two\\n\", mdx(\"inlineCode\", {\n parentName: \"p\"\n }, \"theme\"), \" objects.\"), mdx(\"p\", null, \"Let\\u2019s try it out, we should be able to switch between the two themes\\nwe\\u2019ve defined now.\"), mdx(\"h3\", {\n \"id\": \"extending-styled-components\",\n \"style\": {\n \"position\": \"relative\"\n }\n }, mdx(\"a\", _extends({\n parentName: \"h3\"\n }, {\n \"href\": \"#extending-styled-components\",\n \"aria-label\": \"extending styled components permalink\",\n \"className\": \"anchor before\"\n }), mdx(\"svg\", _extends({\n parentName: \"a\"\n }, {\n \"aria-hidden\": \"true\",\n \"focusable\": \"false\",\n \"height\": \"16\",\n \"version\": \"1.1\",\n \"viewBox\": \"0 0 16 16\",\n \"width\": \"16\"\n }), mdx(\"path\", _extends({\n parentName: \"svg\"\n }, {\n \"fillRule\": \"evenodd\",\n \"d\": \"M4 9h1v1H4c-1.5 0-3-1.69-3-3.5S2.55 3 4 3h4c1.45 0 3 1.69 3 3.5 0 1.41-.91 2.72-2 3.25V8.59c.58-.45 1-1.27 1-2.09C10 5.22 8.98 4 8 4H4c-.98 0-2 1.22-2 2.5S3 9 4 9zm9-3h-1v1h1c1 0 2 1.22 2 2.5S13.98 12 13 12H9c-.98 0-2-1.22-2-2.5 0-.83.42-1.64 1-2.09V6.25c-1.09.53-2 1.84-2 3.25C6 11.31 7.55 13 9 13h4c1.45 0 3-1.69 3-3.5S14.5 6 13 6z\"\n })))), \"Extending styled-components\"), mdx(\"p\", null, \"So far our app hasn\\u2019t got many styled-components that are similar but\\nwhat if we were to add some buttons\\u2026\"), mdx(\"pre\", null, mdx(\"code\", _extends({\n parentName: \"pre\"\n }, {\n \"className\": \"language-js\"\n }), \"export const Button = styled.button`\\n font-size: 1rem;\\n border-radius: 5px;\\n padding: 0.25rem 1rem;\\n margin: 0 1rem;\\n background: transparent;\\n color: ${props => props.theme.primary};\\n border: 2px solid ${props => props.theme.primary};\\n ${props =>\\n props.primary &&\\n css`\\n background: ${props => props.theme.primary};\\n color: white;\\n `};\\n`\\n\")), mdx(\"p\", null, \"Here I\\u2019ve added a \", mdx(\"inlineCode\", {\n parentName: \"p\"\n }, \"Button\"), \" component to the \", mdx(\"inlineCode\", {\n parentName: \"p\"\n }, \"globalStyle.js\"), \" for us to\\nuse in the \", mdx(\"inlineCode\", {\n parentName: \"p\"\n }, \"App.js\"), \" component. For the sake of convenience we\\u2019re going\\nto add it here, you may find if you have a lot of similar components\\nthat you are reusing throughout your app that it may be a good idea to\\nadd them all to a \", mdx(\"inlineCode\", {\n parentName: \"p\"\n }, \"components\"), \" folder.\"), mdx(\"p\", null, \"We can import the \", mdx(\"inlineCode\", {\n parentName: \"p\"\n }, \"Button\"), \" as you would any other component and use it\\nin the module, as we\\u2019re extending it this means we only need to apply\\nthe specific styles we want for that button. But first in the \", mdx(\"inlineCode\", {\n parentName: \"p\"\n }, \"App.js\"), \"\\ncomponent we can specify a normal and a primary button:\"), mdx(\"pre\", null, mdx(\"code\", _extends({\n parentName: \"pre\"\n }, {\n \"className\": \"language-html\"\n }), \" \\n\")), mdx(\"p\", null, \"Now to specify another button with the same css as the imported button\\nwe can extend it, like in this example we\\u2019ll make the button take up\\n40% of the screen width and make the corners more rounded:\"), mdx(\"pre\", null, mdx(\"code\", _extends({\n parentName: \"pre\"\n }, {\n \"className\": \"language-js\"\n }), \"const BigButt = Button.extend`\\n height: 3rem;\\n font-size: 2rem;\\n width: 40vw;\\n border-radius: 30px;\\n`\\n\")), mdx(\"p\", null, \"Let\\u2019s also apply the theme for an underline on \", mdx(\"inlineCode\", {\n parentName: \"p\"\n }, \"create-react-app\"), \" and\\n\", mdx(\"inlineCode\", {\n parentName: \"p\"\n }, \"styled-components\"), \" by adding in an \", mdx(\"inlineCode\", {\n parentName: \"p\"\n }, \"Underline\"), \" styled-component:\"), mdx(\"pre\", null, mdx(\"code\", _extends({\n parentName: \"pre\"\n }, {\n \"className\": \"language-js\"\n }), \"const Underline = styled.span`\\n border-bottom: 4px solid ${props => props.theme.secondary};\\n`\\n\")), mdx(\"p\", null, \"Now we can switch the theme and have it applied to our components\\nusing the theme, pretty neat, right?\"), mdx(\"p\", null, \"I have put all of the examples we have gone over here in a working\\nexample for you to play around with the theming and styled-components,\\nenjoy.\"), mdx(\"p\", null, mdx(\"a\", _extends({\n parentName: \"p\"\n }, {\n \"href\": \"https://codesandbox.io/s/x26q7l9vyq?from-embed\",\n \"target\": \"_blank\",\n \"rel\": \"noopener\"\n }), \"https://codesandbox.io/s/x26q7l9vyq?from-embed\")), mdx(\"h3\", {\n \"id\": \"want-to-know-more\",\n \"style\": {\n \"position\": \"relative\"\n }\n }, mdx(\"a\", _extends({\n parentName: \"h3\"\n }, {\n \"href\": \"#want-to-know-more\",\n \"aria-label\": \"want to know more permalink\",\n \"className\": \"anchor before\"\n }), mdx(\"svg\", _extends({\n parentName: \"a\"\n }, {\n \"aria-hidden\": \"true\",\n \"focusable\": \"false\",\n \"height\": \"16\",\n \"version\": \"1.1\",\n \"viewBox\": \"0 0 16 16\",\n \"width\": \"16\"\n }), mdx(\"path\", _extends({\n parentName: \"svg\"\n }, {\n \"fillRule\": \"evenodd\",\n \"d\": \"M4 9h1v1H4c-1.5 0-3-1.69-3-3.5S2.55 3 4 3h4c1.45 0 3 1.69 3 3.5 0 1.41-.91 2.72-2 3.25V8.59c.58-.45 1-1.27 1-2.09C10 5.22 8.98 4 8 4H4c-.98 0-2 1.22-2 2.5S3 9 4 9zm9-3h-1v1h1c1 0 2 1.22 2 2.5S13.98 12 13 12H9c-.98 0-2-1.22-2-2.5 0-.83.42-1.64 1-2.09V6.25c-1.09.53-2 1.84-2 3.25C6 11.31 7.55 13 9 13h4c1.45 0 3-1.69 3-3.5S14.5 6 13 6z\"\n })))), \"Want to know more?\"), mdx(\"p\", null, \"A great resource for getting started with styled-components which\\nreally helped me is \", mdx(\"a\", _extends({\n parentName: \"p\"\n }, {\n \"href\": \"https://twitter.com/simonswiss\",\n \"target\": \"_blank\",\n \"rel\": \"noopener\"\n }), \"Simon Vrachliotis\"), \"\\u2019s \", mdx(\"a\", _extends({\n parentName: \"p\"\n }, {\n \"href\": \"https://egghead.io/\",\n \"target\": \"_blank\",\n \"rel\": \"noopener\"\n }), \"egghead.io\"), \"\\nstyled-components \", mdx(\"a\", _extends({\n parentName: \"p\"\n }, {\n \"href\": \"https://egghead.io/playlists/styled-components-4169206d\",\n \"target\": \"_blank\",\n \"rel\": \"noopener\"\n }), \"playlist\"), \" which is a great foundation for starting\\nout with styled-components \\uD83D\\uDC4C the first lesson is for pro members but\\nthe rest are currently available to watch for free.\"), mdx(\"p\", null, \"There\\u2019s also the \", mdx(\"a\", _extends({\n parentName: \"p\"\n }, {\n \"href\": \"https://spectrum.chat/?t=54887141-57a9-4386-807c-ed950c4d5132\",\n \"target\": \"_blank\",\n \"rel\": \"noopener\"\n }), \"spectrum.chat\"), \" community and of course \", mdx(\"a\", _extends({\n parentName: \"p\"\n }, {\n \"href\": \"https://stackoverflow.com/questions/tagged/styled-components\",\n \"target\": \"_blank\",\n \"rel\": \"noopener\"\n }), \"Stack\\nOverflow\"), \".\"), mdx(\"h3\", {\n \"id\": \"thanks-for-reading-\",\n \"style\": {\n \"position\": \"relative\"\n }\n }, mdx(\"a\", _extends({\n parentName: \"h3\"\n }, {\n \"href\": \"#thanks-for-reading-\",\n \"aria-label\": \"thanks for reading permalink\",\n \"className\": \"anchor before\"\n }), mdx(\"svg\", _extends({\n parentName: \"a\"\n }, {\n \"aria-hidden\": \"true\",\n \"focusable\": \"false\",\n \"height\": \"16\",\n \"version\": \"1.1\",\n \"viewBox\": \"0 0 16 16\",\n \"width\": \"16\"\n }), mdx(\"path\", _extends({\n parentName: \"svg\"\n }, {\n \"fillRule\": \"evenodd\",\n \"d\": \"M4 9h1v1H4c-1.5 0-3-1.69-3-3.5S2.55 3 4 3h4c1.45 0 3 1.69 3 3.5 0 1.41-.91 2.72-2 3.25V8.59c.58-.45 1-1.27 1-2.09C10 5.22 8.98 4 8 4H4c-.98 0-2 1.22-2 2.5S3 9 4 9zm9-3h-1v1h1c1 0 2 1.22 2 2.5S13.98 12 13 12H9c-.98 0-2-1.22-2-2.5 0-.83.42-1.64 1-2.09V6.25c-1.09.53-2 1.84-2 3.25C6 11.31 7.55 13 9 13h4c1.45 0 3-1.69 3-3.5S14.5 6 13 6z\"\n })))), \"Thanks for reading \\uD83D\\uDE4F\"), mdx(\"p\", null, \"If there is anything I have missed, or if you have a better way to do\\nsomething then please let me know.\"), mdx(\"p\", null, \"Find me on \", mdx(\"a\", _extends({\n parentName: \"p\"\n }, {\n \"href\": \"https://twitter.com/spences10\",\n \"target\": \"_blank\",\n \"rel\": \"noopener\"\n }), \"Twitter\"), \" or \", mdx(\"a\", _extends({\n parentName: \"p\"\n }, {\n \"href\": \"https://github.com/spences10/ama\",\n \"target\": \"_blank\",\n \"rel\": \"noopener\"\n }), \"Ask Me Anything\"), \" on GitHub.\"));\n}\n;\nMDXContent.isMDXComponent = true;","excerpt":"We're going to style the basic create react app with styled-components\nto look something like this: But first, preamble✨: I have always…","tableOfContents":{"items":[{"items":[{"items":[{"items":[{"url":"#me-with-css-before","title":"me with css before"}]}]}]},{"url":"#install-styled-components","title":"Install styled-components"},{"url":"#styled-components-all-the-things","title":"styled-components all the things"},{"url":"#style-the-body-with-injectglobal","title":"Style the body with injectGlobal"},{"url":"#theming","title":"Theming"},{"url":"#use-the-styled-components-themeprovider","title":"Use the styled-components ThemeProvider"},{"url":"#ok-cool-can-you-change-theme","title":"Ok cool, can you change theme?","items":[{"url":"#themeselectjs","title":"ThemeSelect.js"},{"url":"#appjs","title":"App.js"}]},{"url":"#extending-styled-components","title":"Extending styled-components"},{"url":"#want-to-know-more","title":"Want to know more?"},{"url":"#thanks-for-reading-","title":"Thanks for reading 🙏"}]},"timeToRead":7,"fields":{"slug":"/2018/04/03/styled-components/","editLink":"https://github.com/spences10/thelocalhost/edit/authoring/posts/2018/04/03/styled-components/index.md"}}},"pageContext":{"slug":"/2018/04/03/styled-components/","previous":{"id":"d0f5a2d4-d798-5323-9603-b359d950086d","excerpt":"Life moves pretty fast. If you don’t stop and look around once in a\nwhile, you could miss it. — Ferris Bueller. I'm going to go over steps I have taken the help me with learning to\ncode ( again ) But fist, preamble: Let’s pick up a new skill, get a…","frontmatter":{"title":"How to make time for 100 days of code","date":"2018-02-27T00:00:00.000Z"},"fields":{"slug":"/2018/02/27/make-time-for-100doc/"}},"next":{"id":"3e097c8f-333b-5fcc-9c01-e812c878a04b","excerpt":"I'm a bit late to the party using the new React Context API , I did\nget to use it the other day at work, I also made a snippet to\nscaffold out a component for it. I had followed a couple of guides explaining how to use it and neither\nof them as…","frontmatter":{"title":"Use the React Context API with Gatsby","date":"2018-05-22T00:00:00.000Z"},"fields":{"slug":"/2018/05/22/react-context-api-with-gatsby/"}}}}}