styled-components is a library that helps you to write CSS in a component. Here in this post, I will cover more than basics you need to know. CSS-in-JS Introduction You can write scoped CSS which means that CSS will apply only for that element in the component, with no spilling. You can still write . Global CSS Why? Automatics vendor prefixes Unique class names, that means no class names bugs 😉 Removes unused styles Adapting based on props Supports SSR(Server Side Rendering) too Installing npm styled-components i Getting Started styled ; Button = styled.button ; <Button>Click Me! import from 'styled-components' const ` font-size: 1.5rem; padding: 2em; ` //in React </ > Button Button - props Button = styled.button ; <Button primary>Click Me! const ` font-size: 1.5em; padding: 2em; color: ; ` ${ props => (props.primary ? : ) } 'blue' 'black' // In react </ > Button Extending Styles Button = styled.button ; BlueButton - styled(Button) ; const ` font-size: 1.5em; padding: 2em; ` // Extend the button const ` color: blue; ` To reuse the styles Button = styled.button ; export const ` font-size: 1.5em; padding: 2em; ` // DEFINE & EXPORT, Re-use Theme A theme is a collection of all the things we use in an app like the colors, spacing, etc. It defines the design system of your app. It's easier to change. Simple Theme theme = { : { : ; lightblue: ; }, : [ , , , , ], : [ , , , ] } const color blue "#1862fd" "#f0f3ff" sizes 16 32 64 128 256 fontSizes 12 14. 16 20 24 // ... and mannnny thingsss How to? {ThemeProvider} ; App = { ( <Container /> ); } import from 'styled-components' const => () return < = > ThemeProvider theme {theme} </ > ThemeProvider How to use the theme? Button = styled.button ; <Button>Click< const ` color: ; padding: ; ` ${props => props.theme.color.blue} ${props => props.theme.sizes[ ]} 0 //Using the button /Button> Why themes? It helps in creating a style for your app. All the font particulars, colors. spacing and many things can be maintained in one file. You can create themes for one app. separate Best (of styled-components) as props CSS prop attrs Global Styles Server-Side Rendering as prop Header = styled.h1 ; render( ) const `` Hello World! < = > Header as "h3" </ > Header You can create any styled element and use to styles as another element. as prop CSS prop <Button css= /> "padding: 1em;color: red;" To style the component without creating another styled component. To enable support for the CSS prop you have to use the Babel plugin. attrs Input = styled.input.attrs( ({ : })) ; <Input aria-hidden= const => props type "password" `` // Create an input of type password "true: /> To set the default or necessary attributes for the styled component. Global styles { createGlobalStyle } ; GlobalStyle = createGlobalStyle ; <GlobalStyle /> import from 'styled-component' const ` body { color: 'black'; } ` < = > div className "App" </ > div isStyledComponent { isStyledComponent } ; Header = styled.h1 ; isStyled = isStyledComponent(Header); import from 'styled-component' const `` let A utility to help identify styled-components. with styled-system It is a library which gives a lot of utilities that will map the props to your theme. It also makes you Component Oriented styles easy. with styled-system styled ; {space,color,position} ; Card = styled.div ; <Card positon="absolute" top="0" left="0" /> import from 'styled-component' import from 'styled-component' const ` ` ${space} ${color} ${position} < = = /> Card p "2em" bg "red" Without styled-system styled Card = styled.div import from 'styled components' const ` padding: ; background: ; color: ; <Card padding="2em" background="red" /> ${props => props.padding} ${pops => props.background} ${props => props.color} Advantages of styled-system It enables Rapid Development. Re-use of components will be easy It will props-driven development CSS-in-JS No extra tooling to build 😉 Thanks For Reading | Happy Styling 🥂 SUPPORT ME Also published at https://dev.to/rahxuls/all-about-styled-components-1i6c
