adityatyagi

<StyledInput
    invalid={!isValid} // prop
    className={`${!isValid ? " invalid" : ""}`}
    value={name}
    type="text"
    name="name"
    onChange={nameChangeHandler}
></StyledInput>

adityatyagi

<StyledButton type="submit">Submit</StyledButton>

adityatyagi

const StyledButton = styled.button`
 display: inline-block;
  border-radius: 3px;
  padding: 0.5rem 0;
  margin: 0.5rem 1rem;
  width: 11rem;
  background: #000;
  color: white;
  border: 2px solid white;

adityatyagi

// in App.js

// import
import styled from 'styled-components';

// Creating the styled button using the "styled" object imported from "styled-components"
// It will return a styled React component

const StyledButton = styled.button`
 display: inline-block;

adityatyagi

npm install --save styled-components

adityatyagi

// in App.js

{/* Conditionally set border and background color for invalid input */}
    <input
        className={`${!isValid ? " invalid" : ""}`}
        value={name}
        type="text"
        name="name"
        onChange={nameChangeHandler}
    />

adityatyagi

/* style.css */

.main-heading {
  background-color: aqua;
}

.invalid {
  border: 2px solid red;
  background-color: #ffcfcf;
}

adityatyagi

/* style.css */

.main-heading {
  background-color: aqua;
}

adityatyagi

import "./style.css";

adityatyagi

<h1 className="main-heading">Styling in React by Aditya Tyagi</h1>