#### UX/UI Spike :art: --- #### React styled components :nail_care: --- #### What is it? * A react library which lets you manage your css alongside react components. --- #### Where did it come from? * The result of wondering how we could enhance CSS for styling React component systems. * At present in react we use global and module.css files to apply styles. * Issues: big code base/overiding css/class-names --- #### Install ```# with npm npm install --save styled-components ``` --- #### Add to package JSON ``` { "resolutions": { "styled-components": "^5" } } ``` --- How to use? ``` import styled from "styled-components"; ``` --- #### React component:sparkles:  --- #### Apply styles :star-struck:  --- #### Ta-daaaaa :female-artist:  --- #### Adapting based on props * You can pass a function ("interpolations") to a styled component's template literal to adapt it based on its props. --- #### React component :sparkles:  --- #### Apply styles :star-struck:  --- #### Ta-daaaaa :female-artist:  --- #### Extending Styles * Quite frequently you might want to use a component, but change it slightly for a single case. * To easily make a new component that inherits the styling of another, wrap it in the styled() constructor. --- #### React component :sparkles:  --- #### Apply styles :star-struck:  --- #### Ta-daaaaa :female-artist:  --- #### Aims to improve: * :heavy_check_mark: Automatic critical CSS. * :heavy_check_mark: No class name bugs. * :heavy_check_mark: Easier deletion of CSS. * :heavy_check_mark: Simple dynamic styling. * :heavy_check_mark: Painless maintenance. * :heavy_check_mark: Automatic vendor prefixing. --- *[Link to the docs](https://styled-components.com/docs/basics)*