Skip to content

Instantly share code, notes, and snippets.

@nparsons08 nparsons08/Input.js Secret forked from LukeSmetham/Input.js
Created Sep 24, 2019

Embed
What would you like to do?
import React from 'react'; // eslint-disable-line no-unused-vars
import styled from 'styled-components';
const Root = styled.input`
border: 0;
border-radius: 8px;
font-size: 16px;
padding: 20px;
color: white;
margin: 16px 0px;
background-color: ${({ theme }) => theme.colorUtils.fade(theme.color.white, 0.08)};
&::placeholder {
color: #ffffff;
}
&:focus {
background-color: ${({ theme }) => theme.colorUtils.fade(theme.color.white, 0.16)};
}
&:hover {
background-color: ${({ theme }) => theme.colorUtils.fade(theme.color.white, 0.16)};
}
`;
const Input = React.forwardRef(({ field, ...props }, ref) => <Root ref={ref} {...field} {...props} />);
export default Input;
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
You can’t perform that action at this time.