Using Styled-Components To Create Scoped Styling
| Topic | Source |
|---|---|
| 🧩 React | Udemy |
| styled-components |
Styled-components is a react package to style your components in a way that avoids unwanted influence of other components.
Styled-components uses tagged template literals, which is a default JavaScript feature.
The syntax is something like this:
const Button = styled.button`
color: white;
`;
The styled package has functions for all default HTML elements.
It returns a component that adds unique class names to the component and puts the styling in there, avoiding the styling influencing other components.