dropdowns

dropdowns is an object within the theme property for overriding Select dropdown styles.

To override styles for button dropdowns, use popoverMenu.

<Vizzly.Dashboard
  // ...
  theme={{
    dropdowns: {
      separatorBorder: "1px transparent solid",
      selected: {
        background: "rgb(255 255 255 / 1)",
      },
      "&:hover": {
        background: "#f5f5f6",
      },
    },
  }}
/>

Cheese Curds
Milk based product
Gravy
A thickened and seasoned juice 
Chips
Potato based product

Dropdowns

Dropdowns are featured within <Vizzly.Dashboard/> when selects are clicked.

Default Values

import Vizzly, { type VizzlyTheming } from "@vizzly/dashboard"
 
export function Dashboard() {
  const theme: VizzlyTheming.Base = {
    dropdowns: {
      // Default Values
      background: "rgb(255 255 255 / 1)",
      color: "inherit",
      border: "0px solid transparent",
      boxShadow:
        "0 1px 3px 0 rgb(0 0 0 / 0.1), 0 1px 2px -1px rgb(0 0 0 / 0.1)",
      fontSize: 14,
      fontWeight: 500,
      separatorBorder: "1px transparent solid",
      selected: {
        background: "rgb(255 255 255 / 1)",
        fontWeight: 500,
        color: "inherit",
      },
      borderRadius: 8,
      padding: "0.5rem 1rem",
      "&:hover": {
        background: "#f5f5f6",
        fontWeight: 500,
        color: "inherit",
      },
    },
  }
 
  return (
    <Vizzly.Dashboard
      // ...
      theme={theme}
    />
  )
}