modal height problem

[SeungJL]

I want to set the height of the modal directly, but it doesn't work. Is there a way?

"use client";

import { MainHeaderModalType } from "@/app/(home)/_component/MainHeader";
import { DispatchType } from "@/types/commonTypes";
import { Button, Modal as BasicModal } from "flowbite-react";

type ModalType = MainHeaderModalType | null;

export interface IModal {
  modalType: ModalType;
  setModalType: DispatchType<ModalType>;
}

export function Modal({ modalType, setModalType }: IModal) {
  const onClose = () => {
    setModalType(null);
  };

  return (
    <>
      {modalType && (
        <BasicModal show={true} className="h-80" onClose={onClose}>
          <div className="h-80">
            <BasicModal.Header className="p-4">
              Terms of Service
            </BasicModal.Header>
            <BasicModal.Body>
              <div className="space-y-3 w-24 h-8 bg-red-200">test</div>
            </BasicModal.Body>
            <BasicModal.Footer>
              <Button onClick={onClose}>I accept</Button>
              <Button color="gray" onClick={onClose}>
                Decline
              </Button>
            </BasicModal.Footer>
          </div>
        </BasicModal>
      )}
    </>
  );
}

[SutuSebastian]

Take a look at how to customise the component styles by checking the Modal theme here and also how to use the theme system here.

In ur case, u'd probably need to override the theme.root.base property with whatever height u'd like:

<BasicModal
  theme={{
    root: {
      base: twMerge(getTheme().modal.root.base, 'h-80'),
    },
  }}
  {...otherProps}
/>