<commit_before># Tips and tricks

A bunch of useful tips and tricks when working with `styled-components`!

## Using JavaScript to our advantage

To adjust the placeholder color of an input, we need to use the <a href="https://developer.mozilla.org/en-US/docs/Web/CSS/::placeholder">`::placeholder`</a> pseudo element.

> To attach pseudo elements to your styled component, you need to use `&`. For example, to style the placeholder:

```JSX
const Input = styled.input`
  /* Some other styles here… */

  /* Style the placeholder */
  &::placeholder {
    color: palevioletred;
    opacity: 0.5;
  }
`;
```

If you tried to actually run the above example, you'd likely see that the placeholder is still grey.

The unprefixed `::placeholder` pseudo-element is currently only supported in Firefox 51 – we also need to use `::-webkit-input-placeholder`, `::-moz-placeholder`, `:-moz-placeholder` (notice the single colon) and `:-ms-input-placeholder`.

Instead of hardcoding them into our `<Input>`, we can write a JavaScript function that adds those automatically! We can then reuse that function whenever we need to style a placeholder:

```JS
// placeholder.js
import { css } from 'styled-components';

export default function placeholder(rules) {
  return css`
    &::placeholder {
      ${rules}
    }

    &::-webkit-input-placeholder {
      ${rules}
    }

    &::-moz-placeholder {
      ${rules}
    }

    &:-ms-input-placeholder {
      ${rules}
    }
  `;
}
```

Which would be used like this:

```JSX
import { css } from 'styled-components';
import placeholder from '../placeholder';

const Input = styled.input`
  // Old styles here…

  // Style the placeholder
  ${placeholder(css`
    color: palevioletred;
    opacity: 0.5;
  `)}
`;
```

<div align="center">
  <a href="http://www.webpackbin.com/NkZ61pHab">
    <img alt="Screenshot of the above code ran in a browser" src="http://imgur.com/9Etm2yl.jpg" />
    <div><em>Live demo</em></div>
  </a>
</div>

Does this remind you of anything? Exactly, this is kind of like a mixin in Sass – except it's not an arbitrarily added construct on top of CSS, it's just JavaScript! 👍<commit_msg>changed up the placeholder example<commit_after># Tips and tricks

A bunch of useful tips and tricks when working with `styled-components`!

## Using JavaScript to our advantage

To adjust the placeholder color of an input, we need to use the <a href="https://developer.mozilla.org/en-US/docs/Web/CSS/::placeholder">`::placeholder`</a> pseudo element.

> To attach pseudo elements to your styled component, you need to use `&`. For example, to style the placeholder:

```JSX
const Input = styled.input`
  /* Some other styles here… */

  /* Style the placeholder */
  &::placeholder {
    color: palevioletred;
    opacity: 0.5;
  }
`;
```

If you tried to actually run the above example, you'd likely see that the placeholder is still grey.

The unprefixed `::placeholder` pseudo-element is currently only supported in Firefox 51 – we also need to use `::-webkit-input-placeholder`, `::-moz-placeholder`, `:-moz-placeholder` (notice the single colon) and `:-ms-input-placeholder`.

Instead of hardcoding them into our `<Input>`, we can write a JavaScript function that adds those automatically! We can then reuse that function whenever we need to style a placeholder:

```JS
// placeholder.js
import { css } from 'styled-components';

export default function placeholder(...rules) {
  return css`
    &::placeholder {
      ${css(...rules)}
    }

    &::-webkit-input-placeholder {
      ${css(...rules)}
    }

    &::-moz-placeholder {
      ${css(...rules)}
    }

    &:-ms-input-placeholder {
      ${css(...rules)}
    }
  `;
}
```

Which would be used like this:

```JSX
import { css } from 'styled-components';
import placeholder from '../placeholder';

const Input = styled.input`
  // Old styles here…

  // Style the placeholder
  ${placeholder`
    color: palevioletred;
    opacity: 0.5;
  `}
`;
```

<div align="center">
  <a href="http://www.webpackbin.com/NkZ61pHab">
    <img alt="Screenshot of the above code ran in a browser" src="http://imgur.com/9Etm2yl.jpg" />
    <div><em>Live demo</em></div>
  </a>
</div>

Does this remind you of anything? Exactly, this is kind of like a mixin in Sass – except it's not an arbitrarily added construct on top of CSS, it's just JavaScript! 👍

Not clear on why `css` is needed in the above example? Check the article on [Tagged Template Literals]('./tagged-template-literals.md')
{'fraction_non_alphanumeric': 0.13123885918003564, 'fraction_numerical': 0.004456327985739751, 'mean_word_length': 3.525201612903226, 'pattern_counts': {'":': 0, '<': 27, '<?xml version=': 0, '>': 29, 'https://': 2, 'lorem ipsum': 0, 'www.': 2, 'xml': 0}, 'pii_count': 0, 'substrings_counts': 0, 'word_list_counts': {'cursed_substrings.json': 0, 'profanity_word_list.json': 0, 'sexual_word_list.json': 0, 'zh_pornsignals.json': 0}}
{'dir': 'git-commits-cleaned', 'id': '5412888', 'n_tokens_mistral': 1382, 'n_tokens_neox': 1323, 'n_words': 511}