diff --git a/.changeset/rare-rules-fly.md b/.changeset/rare-rules-fly.md new file mode 100644 index 00000000000..da370f60ccc --- /dev/null +++ b/.changeset/rare-rules-fly.md @@ -0,0 +1,6 @@ +--- +'@clerk/clerk-js': patch +'@clerk/types': patch +--- + +Wrap nested `` component in its own AppearanceProvider to recieve its own appearance object. diff --git a/packages/clerk-js/src/ui/components/PricingTable/PricingTable.tsx b/packages/clerk-js/src/ui/components/PricingTable/PricingTable.tsx index 3a65e7c5818..089fc21fc4a 100644 --- a/packages/clerk-js/src/ui/components/PricingTable/PricingTable.tsx +++ b/packages/clerk-js/src/ui/components/PricingTable/PricingTable.tsx @@ -4,6 +4,7 @@ import { useState } from 'react'; import { PROFILE_CARD_SCROLLBOX_ID } from '../../constants'; import { __experimental_CheckoutContext, usePricingTableContext } from '../../contexts'; +import { AppearanceProvider } from '../../customizables'; import { useFetch } from '../../hooks'; import { __experimental_Checkout } from '../Checkout'; import { PlanDetailDrawer } from './PlanDetailDrawer'; @@ -54,33 +55,38 @@ export const __experimental_PricingTable = (props: __experimental_PricingTablePr /> )} - <__experimental_CheckoutContext.Provider - value={{ - componentName: 'Checkout', - mode, - isOpen: showCheckout, - setIsOpen: setShowCheckout, - }} + - {/*TODO: Used by InvisibleRootBox, can we simplify? */} -
- <__experimental_Checkout - planPeriod={planPeriod} - planId={selectedPlan?.id} - /> -
- - + <__experimental_CheckoutContext.Provider + value={{ + componentName: 'Checkout', + mode, + isOpen: showCheckout, + setIsOpen: setShowCheckout, + }} + > + {/*TODO: Used by InvisibleRootBox, can we simplify? */} +
+ <__experimental_Checkout + planPeriod={planPeriod} + planId={selectedPlan?.id} + /> +
+ + +
); }; diff --git a/packages/types/src/clerk.ts b/packages/types/src/clerk.ts index 72eecaf93f5..5f7c6e24ce1 100644 --- a/packages/types/src/clerk.ts +++ b/packages/types/src/clerk.ts @@ -1490,6 +1490,7 @@ type __experimental_PricingTableMatrixProps = { type __experimental_PricingTableBaseProps = { appearance?: PricingTableTheme; + checkoutProps?: Pick<__experimental_CheckoutProps, 'appearance'>; }; export type __experimental_PricingTableProps = __experimental_PricingTableBaseProps &