2d:null 2e:["$","title",null,{"children":"Styled-Components Sandbox | David Hall | Observable"}] 33:[] 31:{"id":"3672c66c7fb05776","slug":"styled-components-sandbox","title":"Styled-Components Sandbox","thumbnail":"9c53692535553174401b3473c10fa5cb3788eb8ca51f17e8e416d26923420eec","access_level":"public","create_time":"$D2019-07-28T19:32:02.469Z","update_time":"$D2019-07-28T20:25:05.843Z","view_time":null,"first_public_time":"$D2019-07-28T20:25:59.518Z","has_unpublished_edits":null,"fork":false,"stars":0,"starred":false,"owner":{"type":"team","id":"e03a1f35385e7271","login":"david-hall","name":"David Hall","avatar_url":"https://avatars-next.observableusercontent.com/afa38c46229fd6d9c4426dfd17e3359afcc7eb8787d0a9c48fafda7bc081c359","tier":"starter_2024"},"version":102,"publish_version":102,"role":null,"authored":false,"authors":[{"type":"individual","id":"0d8260f2c3b197fd","login":"david-hall","name":"David Hall","avatar_url":"https://avatars-next.observableusercontent.com/afa38c46229fd6d9c4426dfd17e3359afcc7eb8787d0a9c48fafda7bc081c359","tier":null}],"members":[{"type":"individual","id":"0d8260f2c3b197fd","login":"david-hall","name":"David Hall","avatar_url":"https://avatars-next.observableusercontent.com/afa38c46229fd6d9c4426dfd17e3359afcc7eb8787d0a9c48fafda7bc081c359","tier":null,"role":"editor"}],"comments":[],"custom_thumbnail":false,"trashed":false,"lapsed":null,"subscribed":null,"forks":2,"collection":null,"type":"notebook","body":{"title":"Styled-Components Sandbox","cells":[{"id":0,"value":"md`# Styled-Components Sandbox`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":15,"value":"md`___ A follow-up to the question I posed at the [end of \"Tagged Template Literals\"](https://observablehq.com/@david-hall/tagged-template-literals#help). ___\n\nThis is NOT a tutorial on using \\`styled-comonents\\`. Heck, it's probably not even worth reading past this point...\n\n# ;-) #\n\nIt's just a place for me to try out the responses to the [question I posed on the forum](https://talk.observablehq.com/t/need-help-using-required-module-styled-components/2213) since they really have nothing to do with the original notebook.\n`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":32,"value":"md`So, as sugested on the forum, rather than ...\n\n styled = require('https://bundle.run/styled-components@4.3.2')\n\n..., use this form of \\`require\\` to resolve \\`react\\`:`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":36,"value":"styled = require.alias({\n react: 'https://unpkg.com/react@16.8.6/umd/react.production.min'\n})('https://unpkg.com/styled-components@4.3.2/dist/styled-components.min') ","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":57,"value":"Button = styled.button` color: red;`","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":88,"value":"md` ### Yeah!!! No more error!!!`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":59,"value":"md`Now, the \\`Button\\` cell resolves correctly, but I expected it to render a red button. It obviously doesn't, so let's play around a bit to find out exactly how this \\`Button\\` object is intended to be used.`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":30,"value":"html`

Start with a few plain buttons to see what they look like.

\n
\n
\n
\n\n`","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":82,"value":"md` ### TODO: ###\nHow do I use the \\`Button\\` object to affect specific buttons or maybe classes of buttons?\n\nNot sure if or when I'll get into any more of this rabbit hole... \n\nI have other wild geese to chase !!!\n\n# ;-)\n`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"}],"files":"$W33","stdlib":"1","titling":"auto"}} 32:"$31:body"