• You can scope your CSS directly to the elements that use it and not have to worry so much about unexpected style cascades or specificity rules (although keep in mind that inheritable CSS properties will still cascade to descendent components of your SCs, so the styles aren’t strictly scoped to just the element you’re applying your SC styles to, but this inheritable behavoir is often desirable).
• SC uses tagged template literals to allow you to harness the power of JavaScript to dynamically apply styles based on state and props (you’ll see plenty of examples of this throughout this post).
• It allows you to have your CSS colocated in the same part of your codebase as the code that uses it, which can make it much easier to maintain your CSS and make your code more reusable. It can also help with performance since you don’t have to uncessarily load a bunch of styles that your page doesn’t use.
• The way that you use SCs aligns well with React’s component and composition-based model, and just like with React Components you can name your SCs anything you want, which can make your components more readable since you don’t always have to reference classes, ids and other element attributes to try and figure out an element is.
• The way you write your style rules is, for the most part, the same as normal CSS, which helps with consistency and makes it easier to transition CSS rules to SC.

1import styled from ‘styled-components’

const <YourElementName> = styled.<elementType>`
  <propertyX>: <valueX>;
  <propertyY>: <valueY>;
`
// Notice how the CSS declarations inside of the 
// backticks are the same format as vanilla CSS

const BlueBox = styled.div`
  width: 100px;
  height: 100px;
  background: blue;
`
// Once the SC has been defined you can use it inside 
// of a React functional or class component in the same 
// was as you would use ordinary React components inside 
// of other React components:
function App() {
  return (
    <BlueBox />
  )
}

The props that get passed to a Styled Component are different than the props that get passed to an actual React component, although any props that are passed to a React component can be used as the value of a prop that gets passed to a SC. I know this might be confusing to read right now but it’ll make sense as you see more examples below. I’d also recommend that once you start using SC that you try logging and comparing the props that you pass to a React component to the props that you pass to a SC within that React component.

const NavLink = styled.a`
  // adapted/dynamic or non-adapted/static styles can go here...
  // this shows how the style can be adpated based on props:
  ${( props ) => props.isActive && `
    // in this example it’s probably unecessary for me to 
    // have both `isActive` and `color` props on this 
    // element since just `color` by itself would suffice, 
    // but I just included both to illustrate the pattern
    color: ${props.myColor};
    // more styles can go here if you want them to be 
    // applied when `isActive` is true
  `}
  // more styles can go here etc...
`

<NavLink 
  isActive 
  myColor=’salmon’ 
/>

Styled Components is typically smart enough to filter out non-standard HTML attributes (e.g. in the examples above isActive and myColor aren’t actual DOM attributes) so that they don’t end up getting rendered to the element in the DOM.

const NavLink = styled.NavLink`	
  color: ${( props ) => props.isActive ? ‘salmon’ : ‘lightsalmon’};
  font-size: ${( props ) => props.size === ‘large’ ? ‘50px’ : ‘25px’};
`

Depending on how you’re using interpolations to adapt based on props, you may need to enclose the CSS property values in quotes. For instance, in the NavLink example if I didn’t enclose the words large, salmon, and lightsalmon in quotes, I would get an error because the program would be looking for variables of those names but they don’t exist. Same thing with the number units for the font-size property; if those weren’t in quotes I would get an error because variable names can’t start with a number.

  color: ${( props ) => props.myColor || ‘salmon’};

  color: ${( props ) => props.myColor && props.myColor}; 

  color: ${( props ) => props.myColor};

  color: ${({ myColor }) => myColor};

const computeColor = () => { 
  // A bunch of calculations go here and eventually 
  // the return the final value to the `computeColor` variable
}
  
// Now within the corresponding SC definition you 
// can simply insert the variable into the interpolation:
  color: ${color};

const SalmonBoxWithBorder = styled(BlueBox)`
  background: salmon;
  border: 1px solid lightsalmon;
`

The weird thing you may notice about these examples is the use of the ampersand (&), which Styled Components uses as a placeholder for the parent style (if you’ve ever used a CSS pre-compiler like Sass, it’s similar to how ampersands are used there), so when the Styled Component gets converted into plain CSS it will replace any instances of & with the the outer Styled Component element it’s within. You can also have selectors without the ampersand preceeding it, and in this scenario Styled Components will target children of the outer Styled Component that have the corresponding selector (although I've found that for most common use-cases you'll probably be using the ampersand).

const Button = styled.button`
  background: lightsalmon;
  &:hover {
    cursor: pointer;
    background: salmon;
  }
  &:disabled {
    cursor: not-allowed;  
    background: gray;
  }
  &::before, &::after { content: ' 👉 '}
  // Just like in vanilla CSS, pseudo-elements can have 
  // two colons or one, although sometimes you’ll see one 
  // because it’s compatible with Internet Explorer 8 
  // and earlier, although if you’re using an IE version 
  // this old you don’t deserve psuedo-elements!!)

const Div = styled.div`
  // target any descendant elements of `Div` that have 
  // the `some-class` class
  & .some-class { ... }
  // target all `div` elements that have a class of 
  // `some-class` and are adjacent to `Div`
  & + div.highlight { ... }
  // target any `Div` element that is a direct child 
  // of `Div`
  & > & { ... }
  // target the first letter of each `p` that is a 
  // descendant of `Div`
  & p::first-letter { ... }
  
  // target `p` elements that are descendants of an 
  // element with the `some-class` class, where the 
  // element with `some-class` is child of `Div`
  .some-class p { ... }
  // target the last child Div of an element with 
  // the `some-class` class
  .some-class & { ... }
`

Just like with vanilla CSS, spacing is important with Styled Components. For instance, & #some-id is not the same as &#some-id (no space between). The former will select any elements that are children of the & component (whatever that component/element may be) while the latter will only select instances of the & component that have the #some-id id attached to it.

import { createGlobalStyle } from 'styled-components'
const GlobalStyles = createGlobalStyle`
  * {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
  }
  ul { list-style: none; }
	
  a { text-decoration: none; }
	
  // The rules above are static but this rule will adapt the color of paragraphs based on the 	// `theme` prop passed to the global style component
  p { color: ${({ theme }) => theme.textColor}; }
`
// By implementing the global styles at the top level of your app, SC will automatically give all the other components (in this example NavBar, MainContent, Footer and all of the descendents of those components) access to it without you having to import the styles or do anything special
export default function App() {
  return (
    <React.Fragment>
      // If you’re interested in implementing themes you should use Styled Components’ ThemeProvider, which I’m not using in this example just to keep things simpler
      <GlobalStyles theme={{ textColor: textColorState }} />
      <NavBar />
      <MainContent />
      <Footer />
    </React.Fragment>
  )
}

const Page = {
  @media (max-width: 750px) {
    font-size: .8em;  
  }
}

import styled, { keyframes } from 'styled-components'
const fadeIn = keyframes`
  0% {
    opacity: 0;
  }
  100% {
    opacity: 1;
  }
`
const FadeInButton = styled.button`
  animation: 1s ${fadeIn} ease-out;
`

As you can see with the animation values above, when you have CSS properties that take multiple types of values (e.g. typically shorthand properties like animation, margin, border, etc.), you can mix interpolated values with static values on the same rule.

const StyledDiv = styled.div`
  && { background: salmon; }
`

.StyledDiv.StyledDiv { background: “salmon”; }

function MyReactDiv(props) {
  return (
    <div className={props.className}>
      This is my React component
    </div>
  )
}
const MyReactDivStyled = styled(MyReactDiv)`
  color: salmon;
  background: ${props => props.bgColor || ‘black’};
`
export default function App() {
  return <MyCustomReactDivStyled bgColor=’midnightblue’/>
}

• This blog post by Max Stoiber, one of the creators of Styled Components, discusses some of the motivation behind creating Styled-Components (it also has some links at the end to other good resources you may want to check out): https://www.smashingmagazine.com/2017/01/styled-components-enforcing-best-practices-component-based-systems/
• This blog post by Chidume Nnamdi talks about the types of things that Styled Component is doing “under the hood” with tagged template literals to turn that weird SC syntax into regular CSS: https://blog.logrocket.com/build-your-own-styled-components-library/
• This blog post by Josh Comeau goes over some slighly more advanced Best Practices for composing Styled Components (as well as a few other things that I've discussed): https://www.joshwcomeau.com/css/styled-components/
• This blog post by Sara Vieira discusses how you can separate your Styled Component definitions from the components they're being used in: https://blog.cloudboost.io/separate-your-code-with-styled-components-ec4fd1ee3ef8