This article has multiple issues. Please help improve it or discuss these issues on the talk page. (Learn how and when to remove these template messages)(Learn how and when to remove this template message)
1 import styled from 'styled-components'; 2 // Create a component that renders a <p> element with blue text 3 const BlueText = styled.p` 4 color: blue; 5 `; 6 7 <BlueText>My blue text</BlueText>
- Thinking in components. No longer do you have to maintain a bunch of stylesheets. CSS-in-JS abstracts the CSS model to the component level, rather than the document level (modularity).
- True rules isolation. Scoped selectors are not enough. CSS has properties which are inherited automatically from the parent element, if not explicitly defined
- Scoped selectors. CSS has just one global namespace. It is impossible to avoid selector collisions in non-trivial applications. CSS in JS generates unique class names by default, when it compiles to CSS.
- Vendor prefixing. The CSS rules are automatically vendor prefixed, so you don’t have to think about it.
- Code sharing. Easily share constants and functions between JS and CSS.
- Only the styles which are currently in use on your screen are in the DOM.
- Dead code elimination
This article needs additional or more specific categories. (June 2019)