### Use cases
Styled components
Material UI styled components
Material UI css
Import styles inside component

### Motivation
- Keeps track of which components are rendered on a page and injects their styles and nothing else
- Generate unique class names for components
- Dynamic styling (props)
- Automatic vendor prefixing

> Note: Higly recommended to use Babel Plugin. See official doc for more details

### Get started

```js
// Create a Title component that'll render an <h1> tag with some styles
const Title = styled.h1`
  font-size: ${props => props.big || "1em"};
  text-align: center;
  color: palevioletred;
`;

// Extending
const CustomTitle = styled(Title)`
	//...
`
```

In some cases you might want to change which tag or component a styled component renders. This is common when building a navigation bar for example, where there are a mix of anchor links and buttons but they should be styled identically.

__You can use polymorhic "as" props__

### Pseudoelements, pseudoselectors, and nesting
They use prepr-r _stylish_
```js
const Thing = styled.div.attrs((/* props */) => ({ tabIndex: 0 }))`
  &:hover {
    color: red; // <Thing> when hovered
  }

  .something-else & {
    border: 1px solid; // <Thing> inside another element labeled ".something-else"
  }
`
```

### Attaching additional props
```js
const Input = styled.input.attrs(props => ({
  // we can define static props
  type: "password",

  // or we can define dynamic ones
  size: props.size || "1em",
}))`
  color: palevioletred;
  font-size: 1em;
  border: 2px solid palevioletred;
  border-radius: 3px;

  /* here we use the dynamically computed prop */
  margin: ${props => props.size};
  padding: ${props => props.size};
`;
```

### Animations
CSS animations with @keyframes aren't scoped to a single component.
> Note: export a keyframes helper which will generate a unique instance that you can use throughout your app:
> Note: keyframe is not supported by __React Native__. Use ReactNative.AnimatedAPI

All shared style fragment should use css helper!
```js
const rotate = keyframes``

// ❌ This will throw an error!
const styles = `
  animation: ${rotate} 2s linear infinite;
`;

// ✅ This will work as intended
const styles = css`
  animation: ${rotate} 2s linear infinite;
`
```

### React Native
For RN use [css-to-react-native](https://github.com/styled-components/css-to-react-native)

[Usage with metro bundler](https://www.styled-components.com/docs/basics#simpler-usage-with-the-metro-bundler)