Styled Components Mixin example

styled-components-mixin-example.jsx

// Mixin like functionality

const textInput = props => `
  color: ${props.error ? color.white : color.base};
  background-color: ${props.error ? color.alert : color.white};
`;

export const Input = styled.input`
  ${textInput}
`;

export const Textarea = styled.textarea`
  ${textInput};
  height: ${props => props.height ? props.height : '130px'}
  resize: none;
  overflow: auto;
`;

You also can do that:

const linkSharedStyles = css`
  color: white;
`;

const Logo = styled(Navbar.Link)`
  ${linkSharedStyles};
`;

You also can do that:

const linkSharedStyles = css`
  color: white;
`;

const Logo = styled(Navbar.Link)`
  ${linkSharedStyles};
`;

error 'css' is not defined ...

@IngridSurya

import styled, { css } from 'styled-components';

@IngridSurya

import styled, { css } from 'styled-components';

ah right, thanks !

You also can do that:

const linkSharedStyles = css`
  color: white;
`;

const Logo = styled(Navbar.Link)`
  ${linkSharedStyles};
`;

Adding on:
vscode-styled-components highlights the css blocks as well.

Just to add my 2 cents, you can re-use mixins for different pseudo classes or elements.

Here is an example mixin:

import { css } from 'styled-components';

export const shadowMixin =({ boxShadow }) => css`
  ${boxShadow && `box-shadow: ${boxShadow};`}
`;

And you can use it like such:

import styled from 'styled-components/macro';

export const Button = styled.button`
  ${props => shadowMixin({ boxShadow: props.boxShadow })}

  :hover {
    ${props => shadowMixin({ boxShadow: props.hoverBoxShadow })}
  }
`;

Note that I was able to reuse the mixin for the hover state.

That button component could then be used like this:

<Button
  boxShadow={'0 0 3px black'}
  hoverBoxShadow={'0 0 5px red'}
>
  My button with shadow
</Button>