---
title: "カスタムコンポーネントがPage Builderのスタイル変更に即座に反応できるようにします"
slug: "let-custom-components-react-instantly-to-style-changes-in-page-builder"
abstract: "スタイル変更時に発生するイベントにサブスクライブするコードをコンポーネントに追加します"
---
# カスタムコンポーネントがPage Builderのスタイル変更に即座に反応できるようにします

ページビルダーエディターモードでは、ユーザーが右側のスタイリングパネルでコンポーネントのスタイルを変更すると、キャンバス上でスタイル変更を見るためにページを読み込み直す必要があり、これが混乱を引き起こすことがあります。

これを避けるために、以下を含むイベントにサブスクライブを作ることができます。

-   instanceId - キャンバス上の構成インスタンスを識別します。
-   cssClasses - 更新されたCSSクラス文字列。

コンポーネントがイベントにサブスクライブされるためには、以下のコードを追加してください:

import { useEffect, useState } from 'react';

function useEventDrivenStyles(id: string, initialStyles: string): string {
 const eventStyles, setEventStyles = useState(initialStyles);

 useEffect(() => {
 const handleStylesChanged = (event: Event) => {
 const { instanceId, cssClasses } = (event as CustomEvent).detail;

 if (instanceId !== id) {
 return;
 }

 setEventStyles(cssClasses ?? '');
 };

 window.addEventListener('sitecore:component-style-change', handleStylesChanged);

 return () => {
 window.removeEventListener('sitecore:component-style-change', handleStylesChanged);
 };
 }, id);

 return eventStyles;
}

解決策はイベント駆動型で、壊れず、コンポーネントごとにオプトインされます。スタイル駆動型のランタイム再計算が必要なコンポーネントは、キャンバス全体のリロードを強制することなく、サブスクライブやリアクションが可能です。プラットフォームが発信した正確なブラウザイベント名を使うsitecore:component-style-change

例えば:

const renderingInstanceId = props.rendering.uid;
const eventStyles = useEventDrivenStyles(renderingInstanceId, props.params.styles);
const marginTop = eventStyles.includes('container-color-background') ? 4 : 0;

return (
 <ComponentContent styles={props.params?.Styles} id={props.params?.RenderingIdentifier}>
 <>
 <div>
 <Text field={{ value: 'First paragraph' }} />
 </div>
 <div data-class-change className={\`mt-${marginTop} text-muted\`}>
 <Text field={{ value: 'This text has a top margin of 4 (1rem).' }} />
 </div>
 </>
 </ComponentContent>
);