What's your favorite way to do UI styling in React?
I'm a huge fan of using Ant Design and then layering my customizations on top of the library. So I'd style my button colors differently after getting the basic button working. How do you do it? Style it from scratch? Bootstrap? Something else?
I like https://bulma.io/ and https://tailwindcss.com/
If you're looking for something that is opinionated but looks professional, check out https://evergreen.segment.com/.
I use https://blueprintjs.com/
https://github.com/cerebral/classy-ui looks like the future
Ooh I've heard of blueprint. Would you then just use something like styled components on top of it to stylize everything?
Most of the components come with extra styles for disabled, intent etc.
Bootstrap is still serving me well. I used to just override the styles, but a while back dove deeper into setting my own variables and then compiling down a custom build which has worked out immensely.
Ooh fancy, I've never tried to make a custom build before. That seems like such a good idea. I've tried using a pre-built theme and that worked great but seemed like a bloated way to do it.
Yeah, the custom build for lack of a better phrase "changed everything". No more trying to figure out the best hover color and all of that, since the color palette you choose ends up compiling out and also gets extrapolated out to all of the different class types (*-primary *-danger, etc).
Worth pursuing if you're already into using Bootstrap and just looking to take things a bit further.
WRT themes... ugh, yeah, so much bloat with those things. Made that mistake on a previous project and we ended up not only fighting with the theme, but also found they didn't compile things, so it was just bootstrap with another million miles of CSS to overwrite bootstrap's defaults.
Currently I use MaterialUI and have a few CSS helper classes in Sass, mostly for adding some margins/paddings and animations.
If I need custom styling for an element I use the MaterialUI theming options, more exactly their
makeStyleswhich is based on JSS, so it's like writing inline CSS for your components but converted to classes at build time for improved performance.Having been a https://getbootstrap.com/ advocate for may years I found that after a while my projects would consist of sass with just bootstrap grid and utils.
More recently I've found https://tailwindcss.com/ which has now superseded my need for bootstrap. My react styling stack now looks like sass + tailwind + postcss all wrapped up with webpack.
This comment was deleted 7 years ago