Tailwind CSS Popover - Theme

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

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

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

Popover Theme Object Type

interface PopoverStylesType {
  defaultProps: {
    placement: string;
    offset:
      | number
      | {
          mainAxis: number;
          crossAxis: number;
          alignmentAxis: number;
        };
    dismiss: {
      enabled: boolean;
      escapeKey: boolean;
      referencePointerDown: boolean;
      outsidePointerDown: boolean;
      ancestorScroll: boolean;
      bubbles: boolean;
    };
    animate: {
      mount: object;
      unmount: object;
    };
    className: string;
  };
  styles: {
    base: object;
  };
}

For TypeScript Only

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

Popover Theme Customization

const theme = {
  popover: {
    styles: {
      base: {
        bg: "bg-white",
        color: "text-blue-gray-500",
      },
    },
  },
};

Examples

Checkout different examples for popover components.

Props

Learn more about props definition and types of popover components.