Carousel button class cannot be overwritten - Githubissues

nuxt / ui

A UI Library for Modern Web Apps, powered by Vue & Tailwind CSS.

https://ui.nuxt.com

MIT License

3.79k stars 462 forks source link

Carousel button class cannot be overwritten #1899

Open Barbapapazes opened 2 months ago

Barbapapazes commented 2 months ago

Environment

Operating System: Linux
Node Version: v18.20.3
Nuxt Version: 3.12.2
CLI Version: 3.12.0
Nitro Version: 2.9.6
Package Manager: npm@10.2.3
Builder: -
User Config: devtools, modules
Runtime Modules: @nuxt/ui@2.17.0
Build Modules: -

Version

"@nuxt/ui": "^2.17.0"

Reproduction

https://stackblitz.com/edit/github-cqtsos?file=app.vue

Hover the carousel.

The left arrow (prevButton) will move but not the right arrow. The only difference is that the class for the previous button are marked as important.

Description

Classes should normally overwrite the one from the button, without an important, but that's not the case.

If you dive into the class from the next button, you'll see the right-4 from the carousel that overwrite our, from the UI config, right-0.

Additional context

No response

Logs

No response

ProsperBao commented 1 month ago

I don't think it's a bug, even from the documentation, or from the code.

You can see in the documentation that there are ways to use it. https://ui.nuxt.com/components/carousel#arrows

is passed in from the nextButton property and prevButton, not directly via ui.default.xxx.

In the code ui.default.xxx has a lower priority than the nextButton property and prevButton.

There is no problem when used in this way.