Search icon CANCEL
Subscription
0
Cart icon
Your Cart (0 item)
Close icon
You have no products in your basket yet
Save more on your purchases now! discount-offer-chevron-icon
Savings automatically calculated. No voucher code required.
Arrow left icon
Explore Products
Best Sellers
New Releases
Books
Videos
Audiobooks
Learning Hub
Conferences
Free Learning
Arrow right icon
Arrow up icon
GO TO TOP
Modern JavaScript Web Development Cookbook

You're reading from   Modern JavaScript Web Development Cookbook Easy solutions to common and everyday JavaScript development problems

Arrow left icon
Product type Paperback
Published in Dec 2018
Publisher Packt
ISBN-13 9781788992749
Length 642 pages
Edition 1st Edition
Languages
Tools
Arrow right icon
Author (1):
Arrow left icon
Federico Kereki Federico Kereki
Author Profile Icon Federico Kereki
Federico Kereki
Arrow right icon
View More author details
Toc

Table of Contents (15) Chapters Close

Preface 1. Working with JavaScript Development Tools 2. Using Modern JavaScript Features FREE CHAPTER 3. Developing with Node 4. Implementing RESTful Services with Node 5. Testing and Debugging Your Server 6. Developing with React 7. Enhancing Your Application 8. Expanding Your Application 9. Debugging Your Application 10. Testing Your Application 11. Creating Mobile Apps with React Native 12. Testing and Debugging Your Mobile App 13. Creating a Desktop Application with Electron 14. Other Books You May Enjoy

Creating StyledComponents for inline styling

CSS-in-JS is a sometimes controversial topic. Before React, it was almost mandatory that you'd have a trio of sets of JS, HTML, and CSS separate files. When React introduced JSX, that was a shot against the trio, because we started placing HTML in the JS code. CSS-in-JS is the natural extension of that idea, because now we want to also include styling within the same JS files.

A first reaction to this is: Isn't that just going back to inline styles? This is a valid question, but inline styles aren't just powerful enough. While you can manage lots of styling by inlining styles, the fact is that there are several features that aren't accessible in this way: keyframes animation, media queries, pseudo selectors, and more.

The idea of going with CSS-in-JS is writing styles by using JS, but then injecting those styles...

lock icon The rest of the chapter is locked
Register for a free Packt account to unlock a world of extra content!
A free Packt account unlocks extra newsletters, articles, discounted offers, and much more. Start advancing your knowledge today.
Unlock this book and the full library FREE for 7 days
Get unlimited access to 7000+ expert-authored eBooks and videos courses covering every tech area you can think of
Renews at $19.99/month. Cancel anytime