nextui icon indicating copy to clipboard operation
nextui copied to clipboard

[BUG] - `slots` option in `extendVariants` does not override base component styles

Open criskell opened this issue 2 months ago • 3 comments

HeroUI Version

@heroui/[email protected], @heroui/[email protected]

Describe the bug

The extendVariants typing tells us that it is possible to pass a slots option to override each possible slot of the base component, but I am not able to override the label slot of the Input component.

Your Example Website or App

No response

Steps to Reproduce the Bug or Issue

CodeSandBox: https://codesandbox.io/p/devbox/nostalgic-jang-q9kw4r?file=%2Fapp%2Fpage.tsx%3A9%2C1

Inline Code:

import { Input as BaseInput } from "@heroui/input";
import { extendVariants } from "@heroui/system-rsc";

export const Input = extendVariants(BaseInput, {
  slots: {
    label: '!font-medium', // This style does not show, even with `!` (`!important`) specifier.
  },
});

export default function HomePage() {
  return (
    <Input label="My label" labelPlacement="outside-top" />
  );
}

Expected behavior

I believe it should be possible to override each component slot globally for all possible variants, where each variant in turn can override that slot.

Screenshots or Videos

No response

Operating System Version

Ubuntu 24

Browser

Chrome

criskell avatar Oct 07 '25 16:10 criskell

ENG-2836

linear[bot] avatar Oct 07 '25 16:10 linear[bot]

@wingkwong I want to work on this issue. Can you assign me?

deepansh946 avatar Nov 11 '25 18:11 deepansh946

@deepansh946 go ahead

wingkwong avatar Nov 12 '25 07:11 wingkwong