How To Style And Write CSS In React

App.js

import "./styles.css";
import styled from "styled-components";
 
const Button = styled.a`
  /* This renders the buttons above... Edit me! */
  display: inline-block;
  border-radius: 3px;
  padding: 1rem;
  margin: 0.5rem 1rem;
  width: 11rem;
  background: black;
  text-decoration: none;
  font-size: 18px;
  color: white;
  border: 2px solid white;
 
  &:hover{
    color:brown;
    background:yellow;
  }
`;
const P = styled.p`
  font-weight: bold;
  font-size: 18px;
  text-align: center;
  color: purple;
 
`;
export default function App() {
  return (
    <div>
      <P>As a Developer, which one do you use the most?</P>
      <Button
        href="https://github.com/styled-components/styled-components"
        target="_blank"
        rel="noopener"
        primary
      >
        GitHub
      </Button>
 
      <Button href="/docs">Documentation</Button>
      <Button href="/docs">Twitter</Button>
    </div>
  );
}