UXPin MergeにはWrapperコンポーネントを利用するオプションがあります。Wrapperコンポーネントは通常、HOC React.jsコンポーネントで、色んな状況で使うことができます。

• theme providerを渡す
• 共通のスタイルファイルのインポート
• 外部サービス（Google Fonts、Adobe Fontsなど）に保存されたフォントファイルを埋め込み

Wrapperコンポーネントはrepoのどこにでも保存することができますが、UXPinの設定ファイルで保存場所を参照する必要があります。

例：

module.exports = {
    components: {
        categories: [
            {
                name: "First Category",
                include: [
                    "src/components/FirstComponent/FirstComponent.js",
                    "src/components/SecondComponent/SecondComponent.js"
                ]
            }
        ],
        wrapper: 'src/Wrapper/UXPinWrapper.js',
        webpackConfig: 'webpack.config.js',
    },
    name: "Name of your Library"
}

基本的なWrapperコンポーネント

最も基本的なWrapperコンポーネントは、 prop childrenを返すHOC React.jsコンポーネントです。 例：

import React from "react";

export default function UXPinWrapper({ children }) {
  return children;
}

ThemeProviderを渡す

Wrapperコンポーネントはtheme providerを実装するために使うことができます。 それによって、UXPinでレンダリングされるすべてのコンポーネントにtheme stylesが追加されます。

例：

import React from 'react';
import { MuiThemeProvider, createMuiTheme } from '@material-ui/core/styles';

const theme = createMuiTheme({
  palette: {
    primary: { main: #006CFF },
    secondary: { main: #444444]},
  },
  typography: { useNextVariants: true },
});

export default function UXPinWrapper({ children }) {

  return <MuiThemeProvider theme={theme}>{children}</MuiThemeProvider>;
}

共通のスタイルファイルのインポート

Wrapperコンポーネントは、共通のスタイルファイルをインポートするためにも使用できます。WebpackはWrapper内のインポートをキャプチャし、コンパイル後に UXPinに送信されるJSパッケージに追加します。 例:

import React from "react";
import '../../styles/sass/common.scss';

export default function UXPinWrapper({ children }) {
  return children;
}

フォントファイルの埋め込み

このソリューションは今後廃止される可能性があります。

MergeはWebpackで処理されるすべてのファイルを直接インポートすることを推奨します。