nextUI pagination component, change background color on all items whether they are active or not?
Answered
futuredevengineer posted this in #help-forum
<Pagination classNames={{item:" text-amber-white bg-black rounded-[5px] hover:scale-105 ", cursor:' hover:bg-transparent hover:border-outcolor hover:border-[1px] border-outcolor border-[1px] bg-transparent shadow-boxshadow shadow-[3px_3px_7px] '}} page={selectedPage} onChange={setSelectedPage} total={pages/3}></Pagination>items, when i try hover:bg-green-500 it will only apply the hover effect on active items, not the non-active one, i want this behaviour on all items, plus hover:scale-105 is not workingif i try
hover:text-green-500 which changes the numbers/text colors in each item, it wil work even on non active item, so how do i change bg on hover on both active and non active items?https://nextui.org/docs/components/pagination#custom-styles
docs for refrence
Answered by Alfonsus Ardani
[&[data-hover=true]:not([data-active=true])]:bg-green-50019 Replies
i was out
it is being overwrriten maybe?
this is on hover
yeah it is being overrwritten
you have to overwrite it with
[&[data-hover=true]:not([data-active=true])]:bg-green-500Answer
@Alfonsus Ardani `[&[data-hover=true]:not([data-active=true])]:bg-green-500`
mhm, i might want to debug why is it being overwritten tho.
no you dont need to
its because thats what NextUI uses for the tailwind
here
you just have to use the same selector