{
    "componentChunkName": "component---src-components-post-template-tsx",
    "path": "/posts/integrate-emotion-theme-with-mui",
    "result": {"data":{"mdx":{"body":"var _excluded = [\"components\"];\n\nfunction _extends() { _extends = Object.assign || function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends.apply(this, arguments); }\n\nfunction _objectWithoutProperties(source, excluded) { if (source == null) return {}; var target = _objectWithoutPropertiesLoose(source, excluded); var key, i; if (Object.getOwnPropertySymbols) { var sourceSymbolKeys = Object.getOwnPropertySymbols(source); for (i = 0; i < sourceSymbolKeys.length; i++) { key = sourceSymbolKeys[i]; if (excluded.indexOf(key) >= 0) continue; if (!Object.prototype.propertyIsEnumerable.call(source, key)) continue; target[key] = source[key]; } } return target; }\n\nfunction _objectWithoutPropertiesLoose(source, excluded) { if (source == null) return {}; var target = {}; var sourceKeys = Object.keys(source); var key, i; for (i = 0; i < sourceKeys.length; i++) { key = sourceKeys[i]; if (excluded.indexOf(key) >= 0) continue; target[key] = source[key]; } return target; }\n\n/* @jsxRuntime classic */\n\n/* @jsx mdx */\nvar _frontmatter = {\n  \"title\": \"Emotion theme과 MUI(Material UI)를 함께 사용 시 오류 해결법\",\n  \"subtitle\": \"-\",\n  \"date\": \"2022-01-31\",\n  \"draft\": false,\n  \"tag\": [\"materialui\", \"javascript\", \"frontend\", \"react\", \"emotion\", \"theme\"]\n};\nvar layoutProps = {\n  _frontmatter: _frontmatter\n};\nvar MDXLayout = \"wrapper\";\nreturn function MDXContent(_ref) {\n  var components = _ref.components,\n      props = _objectWithoutProperties(_ref, _excluded);\n\n  return mdx(MDXLayout, _extends({}, layoutProps, props, {\n    components: components,\n    mdxType: \"MDXLayout\"\n  }), mdx(\"h2\", null, \"\\uC624\\uB958 \\uC0C1\\uD669\"), mdx(\"p\", null, \"\\uD544\\uC790\\uB294 emotion \\uB77C\\uC774\\uBE0C\\uB7EC\\uB9AC\\uB97C \\uC0AC\\uC6A9\\uD558\\uC5EC \\uBE14\\uB85C\\uADF8\\uC758 \\uD14C\\uB9C8 \\uAE30\\uB2A5\\uC744 \\uAD6C\\uD604\\uD574 \\uB193\\uC740 \\uC0C1\\uD0DC\\uC600\\uB2E4. \\uB2E4\\uC74C\\uACFC \\uAC19\\uC740 \\uD615\\uD0DC\\uB85C theme\\uC744 \\uAD6C\\uD604\\uD558\\uACE0, \\uCEF4\\uD3EC\\uB10C\\uD2B8\\uB4E4\\uC5D0\\uC11C \\uCC38\\uC870\\uD558\\uB294 \\uBC29\\uC2DD\\uC774\\uC5C8\\uB2E4.\"), mdx(\"p\", null, \"\\uC544\\uB798 \\uC608\\uC2DC\\uB294 \\uBCF8 \\uBE14\\uB85C\\uADF8\\uC758 \", mdx(\"a\", {\n    parentName: \"p\",\n    \"href\": \"https://github.com/centraldogma99/dogma-blog/blob/main/src/styles/themes.ts\"\n  }, \"src/styles/themes.ts\"), \"\\uC758 \\uC77C\\uBD80\\uC774\\uB2E4.\"), mdx(\"pre\", null, mdx(\"code\", {\n    parentName: \"pre\",\n    \"className\": \"language-javascript\"\n  }, \"const themes: Theme[] = [\\n  {\\n    name: 'blue',\\n    colors: {\\n      primary: 'dodgerblue',\\n      secondary: 'white',\\n      globalBackground: 'white',\\n      title: 'white',\\n      postListBackground: '#eee',\\n      postList: 'black',\\n      postListDate: '#222',\\n      text: 'black',\\n      codeText: 'white',\\n      blockquote: '#eee',\\n      preCode: '#333',\\n    },\\n  },\\n  // .....\\n];\\n\")), mdx(\"p\", null, \"\\uADF8\\uB7F0 \\uB2E4\\uC74C\\uC5D0 emotion\\uC758 \", mdx(\"inlineCode\", {\n    parentName: \"p\"\n  }, \"<ThemeProvider>\"), \"\\uC744 \\uC0AC\\uC6A9\\uD558\\uC5EC, \\uCD5C\\uC0C1\\uC704 \\uCEF4\\uD3EC\\uB10C\\uD2B8\\uB97C \\uB2E4\\uC74C\\uACFC \\uAC19\\uC774 \\uB80C\\uB354\\uB9C1\\uD588\\uB2E4.\"), mdx(\"pre\", null, mdx(\"code\", {\n    parentName: \"pre\",\n    \"className\": \"language-javascript\"\n  }, \"import { ThemeProvider } from '@emotion/react';\\n// current\\uB294 themes \\uBC30\\uC5F4\\uC5D0\\uC11C \\uD604\\uC7AC \\uD14C\\uB9C8\\uB97C \\uAC00\\uB9AC\\uD0A4\\uB294 \\uC778\\uB371\\uC2A4 \\uBCC0\\uC218\\uC774\\uB2E4.\\n// ...\\n  <ThemeProvider theme={themes[current]}>\\n    {children}\\n  </ThemeProvider>\\n// ...\\n\")), mdx(\"p\", null, \"\\uC774\\uB807\\uAC8C \\uAD6C\\uD604\\uD560 \\uACBD\\uC6B0 \\uB2E4\\uC74C\\uACFC \\uAC19\\uC740 \\uC624\\uB958\\uAC00 \\uBC1C\\uC0DD\\uD588\\uB2E4.\"), mdx(\"img\", {\n    \"width\": 709,\n    \"alt\": \"스크린샷 2022-01-31 오후 4 35 31\",\n    \"src\": \"https://user-images.githubusercontent.com/53252434/151760505-9cd5628c-1363-422a-af1d-ed9414b1352c.png\"\n  }), mdx(\"p\", null, \"\\uC624\\uB958 \\uB0B4\\uC6A9\\uC744 \\uBCF4\\uBA74, Material UI \\uCEF4\\uD3EC\\uB10C\\uD2B8\\uC5D0\\uC11C \", mdx(\"inlineCode\", {\n    parentName: \"p\"\n  }, \"theme\"), \"\\uC744 \\uD30C\\uB77C\\uBBF8\\uD130\\uB85C \\uBC1B\\uC544\\uC11C \\uC2A4\\uD0C0\\uC77C\\uC744 \\uC801\\uC6A9\\uD558\\uACE0 \\uC788\\uB294\\uB370, \\uADF8 \\uCEF4\\uD3EC\\uB10C\\uD2B8 \\uB0B4\\uC5D0\\uC11C \\uC0AC\\uC6A9\\uB418\\uB294 \\uBA87\\uBA87 \\uD504\\uB77C\\uD37C\\uD2F0\\uAC00 \\uC5C6\\uB2E4\\uB294 \\uB73B\\uC774\\uB2E4. \\uADF8\\uB3C4 \\uADF8\\uB7F4 \\uAC83\\uC774, \\uC0AC\\uC6A9 \\uC911\\uC778 theme\\uC740 \\uC704\\uC640 \\uAC19\\uC774 \\uBCC0\\uC218 \\uC774\\uB984\\uB4E4\\uB3C4 \\uC9C1\\uC811 \\uC9D3\\uACE0, \\uAD6C\\uC870\\uB3C4 \\uC9C1\\uC811 \\uB9CC\\uB4E0 \\uCEE4\\uC2A4\\uD140 \\uD14C\\uB9C8\\uC774\\uAE30 \\uB54C\\uBB38\\uC5D0 \", mdx(\"inlineCode\", {\n    parentName: \"p\"\n  }, \"theme.transitions.create\"), \" \\uAC19\\uC740 \\uAC83\\uC774 \\uC788\\uC744 \\uB9AC \\uB9CC\\uBB34\\uD558\\uB2E4.\"), mdx(\"p\", null, \"\\uAC80\\uC0C9\\uC744 \\uD1B5\\uD574 \\uCC3E\\uC740 \\uD574\\uACB0\\uCC45\\uC740 \\uB2E4\\uC74C\\uACFC \\uAC19\\uB2E4.\"), mdx(\"h2\", null, \"\\uD574\\uACB0\\uBC95\"), mdx(\"blockquote\", null, mdx(\"p\", {\n    parentName: \"blockquote\"\n  }, \"If you are already using a custom theme with styled-components or emotion, it might not be compatible with MUI's theme specification. If it's not compatible, you need to render MUI's ThemeProvider first. This will ensure the theme structures are isolated.\"), mdx(\"h3\", {\n    parentName: \"blockquote\"\n  }, \"\\uBC88\\uC5ED\"), mdx(\"p\", {\n    parentName: \"blockquote\"\n  }, \"\\uB9CC\\uC57D emotion\\uC774\\uB098 styled-components\\uB85C \\uB9CC\\uB4E0 \\uCEE4\\uC2A4\\uD140 \\uD14C\\uB9C8\\uB97C \\uC0AC\\uC6A9\\uD558\\uACE0 \\uC788\\uB2E4\\uBA74, \\uADF8\\uAC83\\uC740 MUI\\uC758 \\uD14C\\uB9C8 \\uC2A4\\uD399\\uACFC \\uD638\\uD658\\uB418\\uC9C0 \\uC54A\\uC744 \\uC218 \\uC788\\uC2B5\\uB2C8\\uB2E4. \\uB9CC\\uC57D \\uD638\\uD658\\uB418\\uC9C0 \\uC54A\\uB294\\uB2E4\\uBA74, MUI\\uC758 ThemeProvider\\uB97C \\uBA3C\\uC800 \\uB80C\\uB354\\uB9C1\\uD574\\uC57C \\uD569\\uB2C8\\uB2E4. \\uC774\\uAC83\\uC740 \\uD14C\\uB9C8 \\uAD6C\\uC870\\uAC00 \\uC11C\\uB85C \\uBD84\\uB9AC\\uB418\\uC5B4 \\uC788\\uB3C4\\uB85D \\uD560 \\uAC83\\uC785\\uB2C8\\uB2E4.\")), mdx(\"p\", null, \"\\uC989, \\uC815\\uC758\\uD55C \\uCEE4\\uC2A4\\uD140 \\uD14C\\uB9C8\\uAC00 MUI \\uCEF4\\uD3EC\\uB10C\\uD2B8\\uB4E4\\uC5D0\\uAE4C\\uC9C0 \\uD30C\\uB77C\\uBBF8\\uD130\\uB85C \\uC785\\uB825\\uB418\\uB294 \\uAC83\\uC774 \\uBB38\\uC81C\\uC774\\uBBC0\\uB85C, MUI\\uC758 \", mdx(\"inlineCode\", {\n    parentName: \"p\"\n  }, \"<ThemeProvider>\"), \"\\uB97C \\uCD94\\uAC00\\uD568\\uC73C\\uB85C\\uC368 MUI \\uCEF4\\uD3EC\\uB10C\\uD2B8\\uB4E4\\uC744 \\uC704\\uD55C \\uD14C\\uB9C8\\uB97C \\uBCC4\\uB3C4\\uB85C \\uC81C\\uACF5\\uD558\\uBA74 \\uD574\\uACB0\\uD560 \\uC218 \\uC788\\uB2E4\\uB294 \\uAC83\\uC774\\uB2E4.\"), mdx(\"p\", null, \"\\uB530\\uB77C\\uC11C \\uCF54\\uB4DC\\uB97C \\uB2E4\\uC74C\\uACFC \\uAC19\\uC774 \\uBCC0\\uACBD\\uD588\\uB2E4(\", mdx(\"a\", {\n    parentName: \"p\",\n    \"href\": \"https://github.com/centraldogma99/dogma-blog/blob/main/src/components/ThemeContextProvider.tsx\"\n  }, \"src/Components/ThemeContextProvider.tsx\"), \").\"), mdx(\"pre\", null, mdx(\"code\", {\n    parentName: \"pre\",\n    \"className\": \"language-javascript\"\n  }, \"import {\\n  ThemeProvider as ThemeProviderMui,\\n  createTheme,\\n} from '@mui/material/styles';\\nimport { ThemeProvider } from '@emotion/react'\\n// .....\\n  <ThemeProviderMui theme={createTheme()}>\\n    <ThemeProvider theme={themes[current]}>\\n      {children}\\n    </ThemeProvider>\\n  </ThemeProviderMui>\\n// .....\\n\")), mdx(\"p\", null, mdx(\"inlineCode\", {\n    parentName: \"p\"\n  }, \"createTheme()\"), \"\\uC740 MUI \\uB77C\\uC774\\uBE0C\\uB7EC\\uB9AC\\uC5D0\\uC11C \\uC81C\\uACF5\\uD558\\uB294 \\uD568\\uC218\\uB85C, \\uC778\\uC790\\uB97C \\uB530\\uB85C \\uB118\\uAE30\\uC9C0 \\uC54A\\uC73C\\uBA74 \\uAE30\\uBCF8 \\uD14C\\uB9C8\\uB97C \\uBC18\\uD658\\uD55C\\uB2E4. MUI \\uCEF4\\uD3EC\\uB10C\\uD2B8\\uB4E4\\uC774 \\uC791\\uB3D9\\uD558\\uAE30 \\uC704\\uD55C \\uCD5C\\uC18C\\uD55C\\uC758 \\uD14C\\uB9C8\\uB9CC \\uB9CC\\uB4E4\\uC5B4\\uC8FC\\uBA74 \\uB418\\uAE30 \\uB54C\\uBB38\\uC5D0 \\uBCC4\\uB3C4\\uC758 \\uC218\\uC815 \\uC5C6\\uC774 \\uAE30\\uBCF8 \\uD14C\\uB9C8\\uB97C \\uC0AC\\uC6A9\\uD588\\uB2E4. \", mdx(\"inlineCode\", {\n    parentName: \"p\"\n  }, \"createTheme()\"), \"\\uC758 \\uC790\\uC138\\uD55C \\uC0AC\\uC6A9\\uBC95\\uC740 \", mdx(\"a\", {\n    parentName: \"p\",\n    \"href\": \"https://mui.com/customization/theming/#createtheme-options-args-theme\"\n  }, \"\\uC5EC\\uAE30\"), \"\\uB97C \\uCC38\\uACE0.\"), mdx(\"p\", null, \"\\uB610\\uD55C \\uC2E0\\uACBD\\uC4F8 \\uC810\\uC740 \", mdx(\"inlineCode\", {\n    parentName: \"p\"\n  }, \"MUI\\uC758 ThemeProvider\\uB97C \\uBA3C\\uC800 \\uB80C\\uB354\\uB9C1\\uD574\\uC57C \\uD55C\\uB2E4\"), \"\\uB294 \\uAC83\\uC774\\uB2E4. \\uC704 \\uCF54\\uB4DC\\uC5D0\\uC11C\\uB3C4 \\uD655\\uC778\\uD560 \\uC218 \\uC788\\uB4EF\\uC774, emotion\\uC758 ThemeProvider\\uBCF4\\uB2E4 \\uBC14\\uAE65\\uC5D0 MUI\\uC758 ThemeProvider\\uAC00 \\uC815\\uC758\\uB418\\uC5B4 \\uC788\\uB2E4.\"), mdx(\"h2\", null, \"\\uCC38\\uACE0\\uC790\\uB8CC\"), mdx(\"p\", null, mdx(\"a\", {\n    parentName: \"p\",\n    \"href\": \"https://mui.com/guides/interoperability/#theme\"\n  }, \"MUI Style Library Interoperatability - themes\"), mdx(\"br\", {\n    parentName: \"p\"\n  }), \"\\n\", mdx(\"a\", {\n    parentName: \"p\",\n    \"href\": \"https://mui.com/customization/theming/#createtheme-options-args-theme\"\n  }, \"MUI theme API - createTheme\")));\n}\n;\nMDXContent.isMDXComponent = true;","frontmatter":{"date":"2022-01-31","title":"Emotion theme과 MUI(Material UI)를 함께 사용 시 오류 해결법","subtitle":"-","tag":["materialui","javascript","frontend","react","emotion","theme"],"draft":false}}},"pageContext":{"id":"3e614552-1b46-5d41-afad-e51fcdb95105"}},
    "staticQueryHashes": []}