theme

Description

Optional. Applies the specified theme for a component moved via the portal

Usage

theme?: "willow" | "willow-dark";

Example

import { useState } from "react";
import { Modal, TextArea, Portal, Button } from "@svar-ui/react-core";

export default function Example() {
  const [custom, setCustom] = useState(false);

  function hideAll() {
    setCustom(false);
  }

  return (
    <>
      <Button onClick={() => setCustom(!custom)}>Show Dialog</Button>

      {custom && (
        <Portal theme={"willow-dark"}>
          <Modal
            footer={() => (
              <>
                <Button onClick={hideAll}>Yes</Button>
                <Button onClick={hideAll}>No</Button>
                <Button onClick={hideAll}>Maybe</Button>
              </>
            )}
          >
            Some text here
            <TextArea placeholder="Some text" />
          </Modal>
        </Portal>
      )}
    </>
  );
}

---

Related article: Setting the theme for a moved component