Using percentage values for widgetDimensions or widgetDimensions makes widgets display vertically about react-ratings-declarative

[ekeric13]

So the widgetDimensions would make the svg element 20% of it's container, which by default has no width and there isn't a prop to set that.

widgetSpacings affects the padding, but it would be hard to get the stars perfectly aligned on one row as you are affecting the padding, and not the width.

I could create a widgetContainerDimensions prop which would get you partially there (affect the width of the svg container so you can set that to 20%), but you would still need to add in some more custom css.

I suggest ignoring inline styles and just creating your own css. Or maybe keeping the inline styles but add to the defaults via normal css

.widget-ratings {
	width: 100%;
	display: flex;
	justify-content: space-between;
}

Because I am supporting older browsers it would be a lot of work to get it to be evenly spaced on one line, but if you can use flex than it should be pretty easy to do so.

Would that fix your issue?

[glassblowerscat]

When I try to add to the defaults with normal CSS as you suggest, my CSS gets overwritten by the default. I can set properties that the defaults don't set, but I can't overwrite the defaults (e.g., display: flex). I tried with a simple .css file import and with a module. How would one go about adding to the baked-in CSS?