複合元件

styled 套件提供了一個複合元件 API，讓您能夠完全控制每個選擇器的內部結構和渲染。您不再需要使用單一的巨型元件，而是可以由各個獨立的部分來組合出選擇器。

運作方式

每個選擇器（例如 DatePicker）既是一個簡單的元件，也是一個由複合部分組成的命名空間：

import { DatePicker } from "react-date-range-picker-styled";
import "react-date-range-picker-styled/rdrp-styles.css";


// 簡單用法 — 渲染預設佈局
<DatePicker value={value} onChange={setValue} />


// 複合用法 — 完全控制結構
<DatePicker.Root value={value} onChange={setValue}>
  <DatePicker.Trigger />
  <DatePicker.Content>
    <DatePicker.Header>
      <DatePicker.PrevButton />
      <DatePicker.Title />
      <DatePicker.NextButton />
    </DatePicker.Header>
    <DatePicker.Grid />
    <DatePicker.Footer>
      <DatePicker.ClearButton />
      <DatePicker.CancelButton />
      <DatePicker.ConfirmButton />
    </DatePicker.Footer>
  </DatePicker.Content>
</DatePicker.Root>

可用部分