Is it possible to add margin between stars?

[Lucascoorek]

Can't find a way to style individual stars e.g. adding margin or padding.

[reginapizza]

Yes, I've found two ways to do this.

1.) This one will work if the component is not being used anywhere else or if the style will be the same throughout your project (ie. you will never require more than one margin size):

Use the css class it already has to target the margin

.dv-star-rating-star {
  margin: 0rem !important;
  padding: 0rem !important;
}

2.) This method works if your component is customized but NOT editable (I have not been able to make it work if you require it to be editable):

I used renderStarIcon to make the icon an image and then gave that image a class, then added margins to that class.

React Component:

           <StarRatingComponent
                value={this.state.rating}
                onStarClick= {(val) => this.setState({ rating: val })}
                emptyStarColor="#FFF"
                starColor="#FFCC47"
                renderStarIcon={() => <img src="star-icon.svg" className="review-star" alt="star"/>}
            />

CSS:

.review-star {
  height: 32px;
  width: 32px;
  margin: 8px;
}