text: (window.webpackJsonp=window.webpackJsonp||[]).push([[90],{184:function(t,s,a){"use strict";a.r(s);var n=a(0),r=Object(n.a)({},function(){var t=this,s=t.$createElement,a=t._self._c||s;return a("ContentSlotsDistributor",{attrs:{"slot-key":t.$parent.slotKey}},[a("h1",{attrs:{id:"컴포넌트-스타일-확장"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#컴포넌트-스타일-확장","aria-hidden":"true"}},[t._v("#")]),t._v(" 컴포넌트 스타일 확장")]),t._v(" "),a("p",[t._v("Styled Components로 생성되지 않은 React 컴포넌트 또한 스타일 확장이 가능합니다.\n방법은 앞서 살펴본 것과 비슷하지만 "),a("code",[t._v("className")]),t._v(" 속성을 전달 받도록 설정해야 스타일 확장이 적용됩니다.")]),t._v(" "),a("div",{staticClass:"warning custom-block"},[a("p",[t._v("React Native에서 사용할 경우, "),a("code",[t._v("className")]),t._v(" 대신 "),a("code",[t._v("style")]),t._v(" 속성을 사용해야 합니다.")])]),t._v(" "),a("div",{staticClass:"language-jsx line-numbers-mode"},[a("div",{staticClass:"highlight-lines"},[a("br"),a("br"),a("div",{staticClass:"highlighted"},[t._v(" ")]),a("div",{staticClass:"highlighted"},[t._v(" ")]),a("div",{staticClass:"highlighted"},[t._v(" ")]),a("br"),a("br"),a("br"),a("br"),a("br"),a("br"),a("br"),a("br"),a("br"),a("br"),a("br")]),a("pre",{pre:!0,attrs:{class:"language-jsx"}},[a("code",[a("span",{pre:!0,attrs:{class:"token comment"}},[t._v("// Styled Components로 생성되지 않은 React 컴포넌트")]),t._v("\n"),a("span",{pre:!0,attrs:{class:"token comment"}},[t._v("// className 속성을 전달 받아야 스타일 확장이 됨")]),t._v("\n"),a("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("function")]),t._v(" "),a("span",{pre:!0,attrs:{class:"token function"}},[t._v("Book")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),a("span",{pre:!0,attrs:{class:"token parameter"}},[a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v(" className"),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v(" children "),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")])]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),t._v(" "),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n  "),a("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("return")]),t._v(" "),a("span",{pre:!0,attrs:{class:"token tag"}},[a("span",{pre:!0,attrs:{class:"token tag"}},[a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("<")]),t._v("div")]),t._v(" "),a("span",{pre:!0,attrs:{class:"token attr-name"}},[t._v("className")]),a("span",{pre:!0,attrs:{class:"token script language-javascript"}},[a("span",{pre:!0,attrs:{class:"token script-punctuation punctuation"}},[t._v("=")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("className"),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")])]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(">")])]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v(" children "),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),a("span",{pre:!0,attrs:{class:"token tag"}},[a("span",{pre:!0,attrs:{class:"token tag"}},[a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("</")]),t._v("div")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(">")])]),t._v("\n"),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),t._v("\n\n"),a("span",{pre:!0,attrs:{class:"token comment"}},[t._v("// Book 컴포넌트 스타일 확장")]),t._v("\n"),a("span",{pre:!0,attrs:{class:"token comment"}},[t._v("// primary, radius, border 속성 조건 처리")]),t._v("\n"),a("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("const")]),t._v(" StyledBook "),a("span",{pre:!0,attrs:{class:"token operator"}},[t._v("=")]),t._v(" "),a("span",{pre:!0,attrs:{class:"token function"}},[t._v("styled")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),t._v("Book"),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),a("span",{pre:!0,attrs:{class:"token template-string"}},[a("span",{pre:!0,attrs:{class:"token string"}},[t._v("`\n  padding: 0.8em;\n  font: 16px/1 Verdana;\n  border-radius: ")]),a("span",{pre:!0,attrs:{class:"token interpolation"}},[a("span",{pre:!0,attrs:{class:"token interpolation-punctuation punctuation"}},[t._v("${")]),t._v(" "),a("span",{pre:!0,attrs:{class:"token parameter"}},[t._v("props")]),t._v(" "),a("span",{pre:!0,attrs:{class:"token operator"}},[t._v("=>")]),t._v(" props"),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),t._v("radius "),a("span",{pre:!0,attrs:{class:"token operator"}},[t._v("||")]),t._v(" "),a("span",{pre:!0,attrs:{class:"token number"}},[t._v("0")]),t._v(" "),a("span",{pre:!0,attrs:{class:"token interpolation-punctuation punctuation"}},[t._v("}")])]),a("span",{pre:!0,attrs:{class:"token string"}},[t._v(";\n  border: ")]),a("span",{pre:!0,attrs:{class:"token interpolation"}},[a("span",{pre:!0,attrs:{class:"token interpolation-punctuation punctuation"}},[t._v("${")]),t._v(" "),a("span",{pre:!0,attrs:{class:"token parameter"}},[t._v("props")]),t._v(" "),a("span",{pre:!0,attrs:{class:"token operator"}},[t._v("=>")]),t._v(" props"),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),t._v("border "),a("span",{pre:!0,attrs:{class:"token operator"}},[t._v("||")]),t._v(" "),a("span",{pre:!0,attrs:{class:"token string"}},[t._v("'3px solid #06f'")]),t._v(" "),a("span",{pre:!0,attrs:{class:"token interpolation-punctuation punctuation"}},[t._v("}")])]),a("span",{pre:!0,attrs:{class:"token string"}},[t._v(";\n  color: ")]),a("span",{pre:!0,attrs:{class:"token interpolation"}},[a("span",{pre:!0,attrs:{class:"token interpolation-punctuation punctuation"}},[t._v("${")]),t._v(" "),a("span",{pre:!0,attrs:{class:"token parameter"}},[t._v("props")]),t._v(" "),a("span",{pre:!0,attrs:{class:"token operator"}},[t._v("=>")]),t._v(" props"),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),t._v("primary "),a("span",{pre:!0,attrs:{class:"token operator"}},[t._v("||")]),t._v(" "),a("span",{pre:!0,attrs:{class:"token string"}},[t._v("'#06f'")]),t._v(" "),a("span",{pre:!0,attrs:{class:"token interpolation-punctuation punctuation"}},[t._v("}")])]),a("span",{pre:!0,attrs:{class:"token string"}},[t._v(";\n`")])]),t._v("\n")])]),a("div",{staticClass:"line-numbers-wrapper"},[a("span",{staticClass:"line-number"},[t._v("1")]),a("br"),a("span",{staticClass:"line-number"},[t._v("2")]),a("br"),a("span",{staticClass:"line-number"},[t._v("3")]),a("br"),a("span",{staticClass:"line-number"},[t._v("4")]),a("br"),a("span",{staticClass:"line-number"},[t._v("5")]),a("br"),a("span",{staticClass:"line-number"},[t._v("6")]),a("br"),a("span",{staticClass:"line-number"},[t._v("7")]),a("br"),a("span",{staticClass:"line-number"},[t._v("8")]),a("br"),a("span",{staticClass:"line-number"},[t._v("9")]),a("br"),a("span",{staticClass:"line-number"},[t._v("10")]),a("br"),a("span",{staticClass:"line-number"},[t._v("11")]),a("br"),a("span",{staticClass:"line-number"},[t._v("12")]),a("br"),a("span",{staticClass:"line-number"},[t._v("13")]),a("br"),a("span",{staticClass:"line-number"},[t._v("14")]),a("br"),a("span",{staticClass:"line-number"},[t._v("15")]),a("br")])]),a("div",{staticClass:"tip custom-block"},[a("p",[a("strong",[t._v("공식 문서 참고")]),t._v(" ➪ "),a("a",{attrs:{href:"https://www.styled-components.com/docs/basics#styling-any-components",target:"_blank",rel:"noopener noreferrer"}},[t._v("Styling any components"),a("OutboundLink")],1),t._v(" / "),a("a",{attrs:{href:"https://www.styled-components.com/docs/basics#passed-props",target:"_blank",rel:"noopener noreferrer"}},[t._v("Passed props"),a("OutboundLink")],1)])]),t._v(" "),a("h3",{attrs:{id:"라이브-코드"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#라이브-코드","aria-hidden":"true"}},[t._v("#")]),t._v(" 라이브 코드")]),t._v(" "),a("p",[t._v("Book ⇨ StyledBook ⇨ index.js 순으로 적용된 코드를 살펴볼 수 있습니다.")]),t._v(" "),a("iframe-wrapper",{attrs:{src:"https://stackblitz.com/edit/react-96ks9z?ctl=0&embed=1&file=Book.js&hideExplorer=1&hideNavigation=1"}})],1)},[],!1,null,null,null);s.default=r.exports}}]);