What is Styled-Components?
Styled-Components lets you write actual CSS in your JavaScript. This means you can use all the features of CSS you use, including media queries, all pseudo-selectors, nesting, etc.
Motivation
• Automatic critical CSS: styled-components keeps track of which components are rendered on a page and injects their styles and nothing else, fully automatically. Combined with code splitting, this means your users load the least amount of code necessary.
• No class name bugs : styled-components generates unique class names for your styles. You never have to worry about duplication, overlap or misspellings.
• Easier deletion of CSS: it can be hard to know whether a class name is used somewhere in your codebase. styled-components makes it obvious, as every bit of styling is tied to a specific 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 based on its props or a global theme is simple and intuitive without having to manually manage dozens of classes.
• Painless maintenance: you never have to hunt across different files to find the styling affecting your component, so maintenance is a piece of cake no matter how big your codebase is.
• Automatic vendor prefixing: write your CSS to the current standard and let styled-components handle the rest.
Installation
There are multiple ways to add styled-components in projects.
Using CDN Link:
Using npm package manager:
npm install –save styled-components
Using yarn package manager:
yarn add styled-components
How to implement styled component ?
First step would be to import styled component into your component after installations.
Second step would be to define your custom styled component. It returns a function that accepts a tagged template literal and turns it into a StyledComponent.
Now third and important step is to use your custom styled component right into JSX.
After combining your code, it will look something like this.
Output:
How to use Pseudo elements, pseudo selectors in styled components?
By simply using the ‘&’ symbol before pseudo-class name inside the styled components definition pseudo elements, pseudo selectors, can be implemented.
Nesting in styled components?
In nested group of elements, you can target each element simply defining CSS for child element inside the definition of parent element. The example is shown below.
Output:
How to use variables in styled components?
You can variables using string interpolation inside styled components definition to variables for global access.
How to pass props in styled components?
Just like you pass props in your React Components, you can also pass props right into your styled components.
To pass props into your styled components definition you need to use string interpolation and arrow function to access passed props.
Output:
Note : You can also use Object Destructuring to access passed props.
Theme Provider in Styled Components
A helper component for theming. Injects the theme into all styled components anywhere beneath it in the component tree, via the context API.
Styled-components has full theming support by exporting a wrapper component. This component provides a theme to all React components underneath itself via the context API. In the render tree all styled-components will have access to the provided theme, even when they are multiple levels deep.
To illustrate this, let’s create our Button component, but this time we’ll pass some variables down as a theme.
Output:
Global Styles in Styled Components
A helper function to generate a special StyledComponent that handles global styles. Normally, styled components are automatically scoped to a local CSS class and therefore isolated from other components. In the case of createGlobalStyle, this limitation is removed and things like CSS resets or base stylesheets can be applied.
Conclusion:
Styled-Components removes the mapping between components and styles. This means that when you’re defining your styles, you’re actually creating a normal React component, that has your styles attached to it.
To know more about Styled-Component visit Styled-Components official website mentioned below.
Reference: https://styled-components.com/docs