Search code examples
reactjsfrontendweb-componentweb-frontendrating

ReactStars component displays border around stars

I want to use a <ReactStars /> component in my application but when I click a star, that component displays a border around stars. How can I make it not to display that border when I click a star?

I tries to use id or className prop to define a none border style but it doesn't work, I have no other idea what to try. I looked into list of attributes of that component but I didn't find something to cancel that behaviour. I made a minimal example here: https://codesandbox.io/s/recursing-bird-3hufy?file=/src/App.js

Solution

  • You need to add the outline property on the class named react-stars, which is applied by the library to the stars row.

    Here is your updated codesandbox.