React Router > React Input Component

Adding a React input component with no border

Here we've added input.js, which had a new styled Input that sets the border and outline to 0px. You can see this new input when you try to create a new mission by clicking "Missions", then "New Mission".

Lesson 10/26

import styled from "styled-components";

const StyledInput = styled.input`
  font-size: 32px;
  padding: 4px;
  border: 0px;
  outline: 0px;
  font-family: inherit;
  width: 100%;
  background: transparent;
`;

export default StyledInput;

Open Sandbox