Build better component with styled components
Build better component with styled components
02 September 2020
Introduction to STYLED-COMPONENTS
Component-based design is an increasingly popular process for developing web interfaces. It’s been once common for organizations to believe libraries like Bootstrap or Material UI. But with the arrival of improved tooling functionalities, many teams today are building their own themes, component libraries, and style systems. This influx of design and development collaboration is generating many new, exciting systems. That said, rolling your own systems comes with its own challenges and pitfalls. A recent library, styled-system, is an efficient tool for navigating a number of these issues.
This is an admittedly vast topic riddled with rabbit holes. So, I’d wish to limit the scope of this blog to the required points only.
Why use STYLED-COMPONENTS?
- Automatic critical CSS: Styled-components keeps track of which components are rendered on a page and injects their styles and zip else, fully automatically. Combined with code splitting, this suggests your users load the smallest amount of code necessary.
- No class name bugs: One of the beauty of styled-components is that it generates unique class names for your styles. You never need to worry about duplication, overlap or misspellings.
- Easier deletion of CSS: It may be hard to understand whether a category name is used somewhere in your codebase. styled-components makes it obvious, as equally of styling is tied to a selected component. If the component is unused (which tooling can detect) and gets deleted, all its styles get deleted with it.
- Simple dynamic styling: Adapting the styling of a component that supports its props or a worldwide theme is straightforward and intuitive without having to manually manage dozens of classes.
- Painless maintenance: You never need to hunt across different files to seek out the styling affecting your component, so maintenance may be a piece of cake regardless of how big your codebase is.
- Automatic vendor prefixing: Write your CSS to the present standard and let styled-components handle the remainder .
- Component reusability: It gives the flexibility to split larger styled components into smaller parts and also permits to inherit other styled components.
Installation
Installing styled-components only takes a single command if you are using any package manager or module bundler:
Using npm:
npm install --save styled-components
Using yarn:
yarn add styled-components
If you are not employing a module bundler or package manager a worldwide (“UMD”) build is hosted on the unpkg CDN. Simply add the subsequent tag to rock bottom of your HTML file:
<script src="https://unpkg.com/styled-components/dist/styled-components.min.js"></script>
Once you’ve added styled-components styled variable would be added to the window object and can be accessed using ‘’window.styled’’.
Usage
styled-components utilises tagged template literals to style your components.
It removes the mapping between components and designs . This suggests that when you’re defining your styles, you’re actually creating a traditional React component that has your styles attached thereto.
Adapting selected props
You can pass a function (“interpolations”) to a styled component’s template literal to adapt it supported its props.
Extending Styles
Quite frequently you might want to use a component, but change it slightly for a single case. Now, you could pass in an interpolated function and change them based on some props, but that’s quite a lot of effort for overriding the styles once.
To easily make a new component that inherits the styling of another, just wrap it in the styled() constructor. Here we use the button from the last section and create a special one, extending it with some color-related styling:
Pseudoelements, pseudoselectors, and nesting
The preprocessor we use, stylis, supports scss-like syntax for automatically nesting styles.
The ampersand (&) are often wont to refer back to the most component. Here are some more samples of its potential usage:
Animations
CSS animations with @keyframes aren’t scoped to one component but you continue to don’t need them to be global to avoid name collisions. this is often why we export a keyframes helper which can generate a singular instance that you simply can use throughout your app:
Notes
- It’s important to define your styled components outside of the render method, otherwise it’ll be recreated on every single render pass. Defining a styled component within the render method will thwart caching and drastically hamper rendering speed, and will be avoided.
- You’ll also pass tag names into the styled() factory call, like so: styled(“div”). In fact, the styled.tagname helpers are just aliases that do an equivalent .
- If you’re using react-native confine mind to use ‘’style’’ rather than ’’className’’.
Conclusion
Hope this article was helpful for you to find out about the way to start using styled-components working with styled-components with react JS. If you have found this article helpful and worthy then do share it together with your other friends and circle too.
Happy Blogging!!