{"componentChunkName":"component---src-templates-single-blogpost-js","path":"/blog/adapt-material-ui-components-based-on-props-with-styled-components","result":{"data":{"contentfulBlogPost":{"title":"Adapt Material UI components based on props with styled-components","slug":"adapt-material-ui-components-based-on-props-with-styled-components","id":"a106cf47-b48c-5fd4-ae54-579be3d6f226","createdAt":"15. März 2020","category":[{"title":"Material UI","slug":"material-ui","id":"9002ca9c-ae85-58b1-abd4-d467f490bec8","blog_post":[{"title":"Adapt Material UI components based on props with styled-components","slug":"adapt-material-ui-components-based-on-props-with-styled-components","image":{"fluid":{"src":"//images.ctfassets.net/843vngvcufpj/3GYEYO02Do5FYQKtCkm2G1/a5d68d1a0396d2cb49423315358f8e71/apple-desk-laptop-macbook-38519.jpg?w=800&q=50"}},"id":"a106cf47-b48c-5fd4-ae54-579be3d6f226","createdAt":"15. März 2020","childContentfulBlogPostContentTextNode":{"childMarkdownRemark":{"excerpt":"import Modules import styled from 'styled-components'\nimport { Button } from '@material-ui/core…"}}},{"title":"Gatsby with Material UI and styled-components","slug":"gatsby-with-material-ui-and-styled-components","image":{"fluid":{"src":"//images.ctfassets.net/843vngvcufpj/5HHB28bEpN5I34ZZdu3T6r/ae699ca12a82905b64591a552b071664/person-using-black-and-white-smartphone-and-holding-blue-230544.jpg?w=800&q=50"}},"id":"1946258b-09cc-532f-a795-41d0f0ced3c1","createdAt":"18. März 2020","childContentfulBlogPostContentTextNode":{"childMarkdownRemark":{"excerpt":"1. Install dependencies 2. Update gatsby-config.js"}}},{"title":"Edit the default Theme in Material UI","slug":"edit-the-default-theme-in-material-ui","image":{"fluid":{"src":"//images.ctfassets.net/843vngvcufpj/3aWpunSqJ3zvCKn5Jw74bX/f9798361bc96ba1011ba2473b6520ca1/working-macbook-computer-keyboard-34577.jpg?w=800&q=50"}},"id":"c3f5d0b2-3680-5bdf-8c40-4e8955faffc8","createdAt":"18. März 2020","childContentfulBlogPostContentTextNode":{"childMarkdownRemark":{"excerpt":"1. Create a Theme object 2. Pass Theme object to the ThemeProvider 3. Create Layout Component and…"}}},{"title":"Material UI","slug":"material-ui","image":{"fluid":{"src":"//images.ctfassets.net/843vngvcufpj/2l0S9S1tN4bZ6yNpESrHJp/4ee2c2d0852bdf66ec52fa211b2f8ecc/office-freelancer-computer-business-38547.jpeg_cs_srgb_dl_coffee-apple-iphone-smartphone-38547.jpg_fm_jpg?w=800&q=50"}},"id":"c267a5bd-81e2-58b9-ad15-ff5c20231dab","createdAt":"04. März 2020","childContentfulBlogPostContentTextNode":{"childMarkdownRemark":{"excerpt":"Material UI is a Component library for React. It basically gives you predefined, but customizable…"}}}]},{"title":"styled-components","slug":"styled-components","id":"f8aeb8c8-4780-5b97-a787-f278af851268","blog_post":[{"title":"Adapt Material UI components based on props with styled-components","slug":"adapt-material-ui-components-based-on-props-with-styled-components","image":{"fluid":{"src":"//images.ctfassets.net/843vngvcufpj/3GYEYO02Do5FYQKtCkm2G1/a5d68d1a0396d2cb49423315358f8e71/apple-desk-laptop-macbook-38519.jpg?w=800&q=50"}},"id":"a106cf47-b48c-5fd4-ae54-579be3d6f226","createdAt":"15. März 2020","childContentfulBlogPostContentTextNode":{"childMarkdownRemark":{"excerpt":"import Modules import styled from 'styled-components'\nimport { Button } from '@material-ui/core…"}}},{"title":"Gatsby with Material UI and styled-components","slug":"gatsby-with-material-ui-and-styled-components","image":{"fluid":{"src":"//images.ctfassets.net/843vngvcufpj/5HHB28bEpN5I34ZZdu3T6r/ae699ca12a82905b64591a552b071664/person-using-black-and-white-smartphone-and-holding-blue-230544.jpg?w=800&q=50"}},"id":"1946258b-09cc-532f-a795-41d0f0ced3c1","createdAt":"18. März 2020","childContentfulBlogPostContentTextNode":{"childMarkdownRemark":{"excerpt":"1. Install dependencies 2. Update gatsby-config.js"}}}]}],"content":{"childMarkdownRemark":{"html":"
    \n
  1. import Modules
    2. \n
\n

import styled from 'styled-components'\nimport { Button } from '@material-ui/core'

\n
    \n
  1. Create a custom Component
    2. \n
\n
const MyButton = styled(({ props, ...other }) => <Button {...other} />)({\n  background: props => props.bg,\n  color: 'white',\n  '&:hover': {\n    backgroundColor: props => props.bgHover,\n  },\n})\n
\n
<MyButton>click me</MyButton>\n
","timeToRead":1}}},"allContentfulCategory":{"nodes":[{"title":"Google Tag Manager","slug":"google-tag-manager","id":"d0a285b4-b818-5612-8fdc-5f325aa48eb4"},{"title":"Axios","slug":"axios","id":"36071d22-d950-5e0e-8832-52a4f31016bf"},{"title":"Redux","slug":"redux","id":"89dcb61e-1b22-5795-9618-daa15e889512"},{"title":"Express","slug":"express","id":"eff898c7-be39-553c-a199-a8b67af03038"},{"title":"Node.js","slug":"node-js","id":"0c5ec24f-7db8-5e3c-bf01-d8dc8b8c4273"},{"title":"Git","slug":"git","id":"995d33c2-1a26-52b1-81b1-a7c5dfefbb4c"},{"title":"HTML","slug":"html","id":"368ff1b9-f81e-5748-8ea5-5c257ed913f9"},{"title":"GraphQL","slug":"graphql","id":"8101a2c8-2d15-5297-bfd1-d213d77b9ce8"},{"title":"Javascript","slug":"javascript","id":"c5c3bf5b-ef37-5b26-af84-dfb083fecabf"},{"title":"styled-components","slug":"styled-components","id":"f8aeb8c8-4780-5b97-a787-f278af851268"},{"title":"Material UI","slug":"material-ui","id":"9002ca9c-ae85-58b1-abd4-d467f490bec8"},{"title":"CSS","slug":"css","id":"334376eb-4c45-5412-8b19-80f1a16d19e5"},{"title":"Gatsby","slug":"gatsby","id":"8d653418-2491-59d6-a2ef-367d1a6d0a28"},{"title":"React","slug":"react","id":"0bdfb3a0-b67b-5b9a-802a-7182aa70702b"}]}},"pageContext":{"slug":"adapt-material-ui-components-based-on-props-with-styled-components","title":"Adapt Material UI components based on props with styled-components"}}}