mui / mui/base-ui

[popover] Consider adding the ability to set some `Positioner` props via CSS variables

Open
#1,545 1 comment 2 reactions 0 assignees View on GitHub
component: popover type: new feature
Dominant language
TypeScript
Stars
10.9k
Forks
543
Avg merge
1d 20h
Merged PRs (30d)
101

Description

# Feature request

## Summary

The following props of `Popover.Positioner` (and other `Positioner` components) would make sense to change at different breakpoints, which would be easy to do with media queries if they could be set via CSS variables / custom properties (e.g. `--side-offset: 16px`):

![Image](https://github.com/user-attachments/assets/3134ff9e-15a7-4384-b426-a0627216486a)

## Examples in other libraries

Give me a couple months and I'll have an example in my own library :D

## Motivation

Of course it's possible to change the prop dynamically in JS, but CSS is a much more natural place to do this sort of conditional styles. Consider this example with container queries in Tailwind CSS:

```jsx


{/* ... */}

{/* ... */}

{/* ... */}

```

Thank you!

Contributor guide

Open the contributing guide

Assessment

This issue has not been assessed yet.

Get new issues in your inbox

A short digest of beginner-friendly GitHub issues.