[v5.1.7] Rating displays vertically by default using tailwind

[michael-2509]

[aybolid]

Same issue. <Rating emptyStyle={{ display: "flex" }} fillStyle={{ display: "-webkit-inline-box" }} /> This should help

[njoromyke]

.style-module_emptyIcons__Bg-FZ { display: flex !important; }

[njoromyke]

In Next JS

[renatoastra]

Same issue. <Rating emptyStyle={{ display: "flex" }} fillStyle={{ display: "-webkit-inline-box" }} /> This should help

Thanks!!

[vandercloak]

The solution of using <Rating emptyStyle={{ display: "flex" }} fillStyle={{ display: "-webkit-inline-box" }} /> appears to no longer work for the latest Safari Version: 16.5.1. Working great in other browsers, just safari latest.

Anyone else experiencing this or found other solutions?

[vandercloak]

I got it working... But its VERY hacky... but in the hopes it saves someone else some time, here is what worked for me:

<Rating
  emptyStyle={{ display: "flex" }}
  SVGstyle={{ display: "inline-block", marginBottom: 10 }}
  style={{ marginBottom: -10 }}
  ...
/>

The stars were positioned wrong for some reason and the two margin styles resolved it for me so they yellow stars showed up correctly.

[elvismdev]

In Next.js 13 with Flowbite.

[Defite]

emptyStyle={{ display: "flex" }} SVGstyle={{ display: "inline-block", marginBottom: 10 }} style={{ marginBottom: -10 }}

hover is not working.