CSS is not loaded
Closed this issue · 8 comments
weird Styling of components
Did you include the component's CSS? https://github.com/instructure-react/react-toggle#installation
Not reopening the issue, but wondering about your motives to not have it include the default styling automatically. Great plugin, btw. Rather handy!
Sometimes people want to style the button entirely from scratch and it would then unnecessarily bloat the served CSS. The class names might also clash with existing ones, although that's not very likely. These are just my thoughts on it though, not sure what @aaronshaf's original thought behind it was.
@ahstro hej! mhm I thought so too. But perhaps they may have had a different purpose/motive.
I'm asking because if you install it as a npm module, it makes it cumbersome (a #devlife kind of first world problems, right? haha) to refer the path to the styles file through node_modules.
Perhaps there could be an option flag to turn the default styling off instead. PR opportunity?
@hallaathrad I'm not quite sure I follow. How are you importing the styles? Should be possible with just import "react-toggle/style.css" in most cases. Adding a "Usage"-section, explaining - among other things - this, to the README would be a great PR opportunity though, if you're looking for one 🙂
Seems to me the extra line of code is simply unnecessary for a user who's OK with defaults.
Personally preferring a "plug and play" approach to components, I think "customisation", by definition, implies additional work (which would mean such additional line would actually be expected).
Adding a Boolean flag to turn the default styling off would make more sense than asking regular users to add code that, you're right, could currently be documented better.
Just my opinion, however.
Been playing with this component all da yesterday. Pretty good! easy to work with.
Don't think you can programmatically select what to import though, so a prop to disable default styling wouldn't do anything for minimizing bundle size. I can't imagine it being a hurdle so big as to dissuade someone from using the component, especially not if there's some sort of documentation present.
Edit: Went ahead and made the documentation in the README a bit clearer.
Absolutely, you're right. But would it make it easier to just "npm i toggle, import toggle, done"?
Ready to use out of the box. Much as I dislike it, this is the main reason why Bootstrap has been so popular.
On a side note, the bundle does vary based on what you include, if I understand Webpack's tree-shaking correctly. I may be wrong on this one though. The size difference in this case would be minimal though, methinks.