Reusing CSS With Styled Components

styled.js

import styled, { css } from ‘styled-components’;

export const DefaultInput = styled.input`
  border: 1px solid ${({error})=>( error ? `red` : `grey` )};
  border-radius: 4px;
  outline: none;
  padding: 0.5em;
`;

export const SecondComponent = styled(DefaultInput)`
  /* make changes as needed*/
`;

const baseInputStyles = css`
  border: 1px solid ${({error})=>( error ? `red` : `grey` )};
  border-radius: 4px;
  outline: none;
  padding: 0.5em;
`;

export const DefaultInput = styled.input`
  ${baseInputStyles}
`;

export const SecondComponent = styled.button`
  ${baseInputStyles}
    /* make changes as needed*/
`;