day8
Dropdown arrow is not stylable on high-res (without deep hacking)
Due to background-image being marked !important in the media section of re-com.css, all attempts to style this control via stylesheets with a custom image for the dropdown arrow are failing. I had to resort to the following 'deep hacking' in componentDidMount to achieve the styling.
(.setProperty (aget b "style") "background-image" "image.png" "important")
where b is defined as:
(.item (.getElementsByTagName (.getDOMNode this) "b") 0)
This poking into the implementation of the dropdown to pull out a b is obviously not ideal.
See Issue #99 for similar situation.
As of re-com 2.13.2, this is not possible even with the addition of parts keyword argument which can be used to solve similar issues like #99 . This is because the drop down arrow is not exposed to the parts supplied to single-dropdown. I suggest adding a new parts keyword called arrow which can be used to style or add classes to the dropdown arrow. I have attached the code to add this feature below.
Example usage at https://github.com/day8/re-com/pull/318#issue-1112551187