cn doesn't override styles on DialogClose

[Sashkan]

I'm working on a Command component, which uses the Dialog component.

The base version of the Dialog component includes a DialogClose by default in its content. I'd like to override the styling of this Close button, so I came up with this piece of code:

export default function Search() {
  const [isModalOpen, setIsModalOpen] = useState(false);

  const handleOpenSearchModal = useCallback(() => {
    setIsModalOpen(!isModalOpen);
  }, [isModalOpen]);

  return (
    <>
      {/* Search button */}
      <Button
        variant="secondary"
        className="w-full justify-start px-2.5 py-1.5 bg-white-border-gradient"
        onClick={handleOpenSearchModal}
      >
        <SearchIcon size={16} className="text-stone-600" />
        <span className="text-sm font-semibold capitalize text-stone-400">
          Search
        </span>
      </Button>

      {/* Search modal */}
      <CommandDialogWithoutClose
        open={isModalOpen}
        onOpenChange={handleOpenSearchModal}
      >
        <div className="flex items-center justify-between gap-x-4">
          <CommandInput />
          <DialogClose
            className="relative right-0 top-0"
            onClick={handleOpenSearchModal}
          />
        </div>
      </CommandDialogWithoutClose>
    </>
  );
}

The DialogClose component uses cn to handle additional CSS classes, but AFAIK, the classes I added here (relative right-0 top-0) are not applied. How can I override them ? The "ugly" workaround I found was to remove the DialogClose completely and replace it by a custom button, wut that doesn't really solve the issue.

[imopbuilder]

@Sashkan

It's not the problem with cn function

Property right-0 will not work when the position is said to relative. It will only work when the position is absolute, fixed

[shadcn]

This issue has been automatically closed because it received no activity for a while. If you think it was closed by accident, please leave a comment. Thank you.

[steinhardt21]

As you can see in the first screenshot, the component <DialogClose> does not overwrite the default close button of the Dialog component. How can we overwrite with DialogClose the default close button?

(in blue my custom button and under it there is the default button that I highlighted with the red arrow)

Here is my code, where I am using the Dialog Button and the DialogClose component from shadcn/ui library :

[imopbuilder]

@steinhardt21

You can change the styles of the DialogClose button from the dialog.tsx file so that they will be consistent across the app

[steinhardt21]

Thank you @imopbuilder ! I did this but I was not sure that was the best way