Tailwind CSS Drawer - Theme

Learn how to customize the theme and styles for drawer component, the theme object for drawer component has two main objects:

A. The defaultProps object for setting up the default value for props of drawer component.
B. The styles object for customizing the theme and styles of drawer component.

You can customize the theme and styles of drawer component by adding Tailwind CSS classes as key paired values for objects.



Drawer Theme Object Type

interface DrawerStylesType {
  defaultProps: {
    size: number;
    overlay: boolean;
    placement: "top" | "right" | "bottom" | "left";
    overlayProps: React.ClassAttributes<HTMLDivElement> & React.HTMLAttributes<HTMLDivElement>;
    className: string;
    dismiss: {
      enabled: boolean;
      escapeKey: boolean;
      referencePress: boolean;
      referencePressEvent: 'pointerdown' | 'mousedown' | 'click';
      outsidePress: boolean | ((event: MouseEvent) => boolean);
      outsidePressEvent: 'pointerdown' | 'mousedown' | 'click';
      ancestorScroll: boolean;
      bubbles: boolean | {
          escapeKey: boolean;
          outsidePress: boolean;
      };
    };
    onClose: () => void;
    transition: object;
  };
  styles: {
    base: {
      container: object;
      overlay: object;
      drawer: object;
    };
  };
}


For TypeScript Only

import { DrawerStylesType } from "@material-tailwind/react";

Drawer Theme Customization

const theme = {
  drawer: {
    styles: {
      base: {
        drawer: {
          position: "fixed",
        },
        overlay: {
          position: "absolute",
        },
      },
    },
  },
};
Edit this page on Github