Add a custom Class for the Show/Hide Button
lucidlemon opened this issue · 3 comments
It's pretty hard to style it since it doesn't get any class on top of it, of course there is the inline styling, but this for example messes up with my external css styling.
Appreciate it. I'll take a look at it this week and see what I can come up with.
@lucidlemon Could you explain in more depth the conflicts you're having between using buttonStyles and your external CSS styles?
Since currently the default styles for both the input and button are done inline, I am having trouble thinking of a clean way to add a custom class that can be used to override these default inline styles, since the inline styles will override any non-!important external styles.
The alternative would be to keep all the styles external (including the default styles), but this would require me to ship a stylesheet with the library that the developer must include to get default styles.
The current way of customizing styles works well with styled-components, react-css-modules, csjs, as well as the purely inline-style approach (which personally I'm not a huge fan of but is fairly popular in the community).
I can see how this would be frustrating though if you're writing global CSS styles and want to keep all your styles in CSS files and not have some leak into JS files out of necessity. Also makes it much more difficult to use alongside things like bootstrap.
Thoughts? I'm definitely open to ideas on changing how styles are handled.
For example I have set up my webpack to include small images within my css directly base64 encoded, while this does not apply to my js includes.
Also Hover Styles are way easier to style via css/scss, or media queries. I found both of them hard to deal with inline js-css.
You are right, it would require a bit of !important, in theory. But we could also add an option like disableStyles which would exclude all this components styles anyhow.
I did a pull request on this (#21) which would at least add the iconClass for now, as well as an event listener for OnKeyDown, which would help a lot.