mui / mui/base-ui

Feature request: Export resolveClassName

Open
#3,670 1 comment 2 reactions 0 assignees View on GitHub
scope: public utils type: new feature waiting for 👍
Dominant language
TypeScript
Stars
10.9k
Forks
543
Avg merge
1d 20h
Merged PRs (30d)
101

Description

# Feature request

## Summary

Using BaseUI with tailwind-variants, it expects className to be a string/obj/array (not a function), but BaseUI className prop can be a string or a function passing state as an arg. So this throws a typescript error:

```tsx
import { Button as ButtonBase } from "@base-ui/react/button";
import { tv, type VariantProps } from "tailwind-variants";

const button = tv({
base: "font-semibold text-black py-1 px-3 rounded-full active:opacity-80",
variants: {
color: {
primary: "bg-blue-500 hover:bg-blue-700",
secondary: "bg-purple-500 hover:bg-purple-700",
},
size: {
sm: "py-1 px-3 text-xs",
md: "py-1.5 px-4 text-sm",
},
},
});

function Button({
className,
color,
size,
...props
}: ButtonBase.Props & VariantProps) {
return (

);
}

export { Button };
```

Image

To fix it you need to normalize the prop to a string if its a function like this:
```
button({ color, size, className: typeof className === "function" ? className(state) : className, })} {...props} />
```

Which is exactly whats being used under the hood with [resolveClassName](https://github.com/mui/base-ui/blob/master/packages/react/src/utils/resolveClassName.ts).

It'd be really helpful if that could be exported/exposed publicly so we could use that instead of rolling out own version.

I'd put in a PR myself but none of the other utils are exported so I'm not sure how you would want to approach it.

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.