Input.js

import React from 'react';
import styled from 'styled-components';

const StyledInput = styled.input`
	color: ${props => props.disabled ? `${props.theme.colors.gray}`	: `${props.theme.colors.darkgray}`};
	font-size: ${props => `${props.theme.fontSizes[2]}px`};
	border: 1px solid;
	border-color: ${props => props.theme.colors[props.borderColor] || props.theme.colors.lightgray};
	background: ${props => props.theme.colors[props.bg] || props.theme.colors.white};
	border-radius: ${props => `${props.theme.radii[2]}`};
	padding: ${props => `${props.theme.space[2]}`};
	outline: none;

	::placeholder,
	::-webkit-input-placeholder {
		font-size: ${props => `${props.theme.fontSizes[2]}px`};
	}
	:-ms-input-placeholder {
		font-size: ${props => `${props.theme.fontSizes[2]}px`};
	}
`;

const Input = props => {
	return <StyledInput {...props} />;
};

export default Input;