Table of Contents

Pass-through (pt) cheat sheet

Every Cratis wrapper forwards PrimeReact's pt, ptOptions, and unstyled props somewhere — but where depends on how much PrimeReact the wrapper composes. This page summarizes the pattern per component so you know which prop to reach for.

Three patterns

1. Single-widget wrappers

The wrapper renders exactly one PrimeReact widget and forwards pt / ptOptions / unstyled / className straight to it. The pt slot names are PrimeReact's own — see the underlying component's documentation.

Wrapper Underlying widget pt slot reference
Dialog primereact/dialog Dialog PrimeReact Dialog pt
Dropdown primereact/dropdown Dropdown PrimeReact Dropdown pt
InputTextField primereact/inputtext InputText PrimeReact InputText pt
TextAreaField primereact/inputtextarea InputTextarea PrimeReact InputTextarea pt
NumberField primereact/inputnumber InputNumber PrimeReact InputNumber pt
DropdownField primereact/dropdown Dropdown PrimeReact Dropdown pt
RadioGroupField primereact/radiobutton RadioButton (one per option) PrimeReact RadioButton pt
RadioButtonField primereact/radiobutton RadioButton PrimeReact RadioButton pt
CalendarField primereact/calendar Calendar PrimeReact Calendar pt
CheckboxField primereact/checkbox Checkbox PrimeReact Checkbox pt
SliderField primereact/slider Slider PrimeReact Slider pt
ChipsField primereact/chips Chips PrimeReact Chips pt
MultiSelectField primereact/multiselect MultiSelect PrimeReact MultiSelect pt
ColorPickerField primereact/colorpicker ColorPicker PrimeReact ColorPicker pt
EventsView primereact/timeline Timeline PrimeReact Timeline pt

Example:

<InputTextField
    value={c => c.email}
    title="Email"
    pt={{ root: { className: 'border-2 border-sky-500' } }}
/>

2. Multi-slot composites

The wrapper composes more than one PrimeReact widget and exposes a sibling set of *Pt / *PtOptions / *Unstyled / *ClassName props per slot.

Dialog-based dialogs

CommandDialog is a single Dialog and forwards pt/ptOptions/unstyled to that Dialog.

StepperCommandDialog composes a Dialog and a Stepper:

Prop Targets
pt / ptOptions / unstyled The inner PrimeReact Stepper.
dialogPt / dialogPtOptions / dialogUnstyled / dialogClassName The outer PrimeReact Dialog. 
<StepperCommandDialog<RegisterAuthor>
    command={RegisterAuthor}
    title="Register author"
    pt={{ stepperpanel: { content: { className: 'pt-6' } } }}
    dialogPt={{ header: { className: 'bg-slate-900 text-slate-50' } }}
    dialogClassName="shadow-2xl"
>
    …
</StepperCommandDialog>

Data tables and pages

DataTableForQuery and DataTableForObservableQuery each compose a DataTable and a Paginator:

Prop Targets
pt / ptOptions / unstyled / className The inner DataTable.
paginatorPt / paginatorPtOptions / paginatorUnstyled The inner Paginator.

DataPage composes a DataTable and a Menubar:

Prop Targets
tablePt / tablePtOptions / tableUnstyled / tableClassName The inner DataTable.
menubarPt / menubarPtOptions / menubarUnstyled / menubarClassName The action Menubar. 
<DataPage<AllAuthors, Author, never>
    title="Authors"
    query={AllAuthors}
    tablePt={{ table: { className: 'min-w-full divide-y divide-slate-700' } }}
    menubarPt={{ root: { className: 'px-3 py-2 bg-slate-900' } }}
>
    <DataPage.MenuItems>…</DataPage.MenuItems>
    <DataPage.Columns>…</DataPage.Columns>
</DataPage>

3. Large composites

These wrappers render many PrimeReact widgets internally (InputText, InputNumber, Checkbox, Calendar, InputTextarea, Dropdown, Button, Menubar, …). Exposing a pt prop per inner widget would be impractical; instead, they expose className on the root for layout/positioning, and you restyle their internals via the global pt preset on CratisComponentsProvider.

Wrapper What it accepts How to restyle internals
ObjectContentEditor className Global pt on CratisComponentsProvider covering inputtext, inputnumber, checkbox, calendar, inputtextarea.
ObjectNavigationalBar className Global pt covering button; --cratis-surface-border for the bottom border.
SchemaEditor className Global pt covering menubar, button, datatable, dropdown, inputtext.

Example with a global preset:

<CratisComponentsProvider value={{
    unstyled: true,
    pt: {
        inputtext: { root: { className: 'my-input' } },
        inputnumber: { input: { root: { className: 'my-input' } } },
        button: { root: { className: 'my-btn' } },
        /* … */
    }
}}>
    <ObjectContentEditor object={data} schema={schema} editMode />
</CratisComponentsProvider>

Where the global pt reaches

A pt preset on CratisComponentsProvider flows into every PrimeReact widget rendered by every wrapper — including the internals of the large composites. Per-instance pt props on individual wrappers are merged with the global preset (PrimeReact's ptOptions.mergeSections defaults to true).

To replace a slot's preset entirely on a single instance, opt out of merging:

<Button label="Special" pt={{ root: { className: 'special-btn' } }}
        ptOptions={{ mergeSections: false }} />

Components that do NOT accept per-instance pt

  • BusyIndicatorDialog — the dialog is rendered by the dialog host on demand and the request type lives in @cratis/arc.react, so no per-instance prop is plumbed through. Use the global pt on CratisComponentsProvider to restyle it.

See also