Custom Arrows Not Working Due To ::before pseudo-element

I forked the sandbox and made my changes to demonstrate the issue: https://codesandbox.io/s/react-slick-playground-6e2o0?file=/index.js

Basically, all I have done is request that the next arrow be green, but it still appears as white. If you inspect the next arrow, you'll see that the color green has been applied to it. Opening up the button tag, however, you'll see ::before. That is what's really being displayed - slick-next:before. And so the button stays white, ignoring any custom styling.

In the documentation for custom arrows, changing the backgroundColor works because :before does not have any special styling for backgroundColor. But because color is defined for slick-next:before, it takes precedence.

I wanted more customized arrow that are not simply re-styling the existing arrows. My custom arrows appear alongside the slick-next:before arrow. They do not replace it. I cannot modify the styling for slick-next:before nor can I remove the element completely.

Is there an easy fix for this?