[React] Create component variations in React with styled-components and "extend"

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

const Button = styled.button`
  background: ${props => props.theme.base};
  color: white;
  font-size: 1rem;
  padding: .75rem 2rem;
  box-shadow: 0 3px 5px rgba(0, 0, 0, 0.1);
  cursor: pointer;
  border: none;
  border-radius: 4px;
  margin: .5rem;
  transition: all 0.1s;
  &:hover {
    transform: translateY(1px);
    box-shadow: 0 2px 3px rgba(0, 0, 0, 0.15);
  }
`;

const ButtonDanger = Button.extend`background: ${props => props.theme.danger};`;
const ButtonGradient = Button.extend`
  background: ${props => props.theme.gradient};
`;

/* ============================== */
/* ===== the main component ===== */
/* ============================== */
const App = () =>
  <div>
    <Button>Basic button</Button>
    <ButtonDanger>Watch out now!</ButtonDanger>
    <ButtonGradient>Gradient Button!</ButtonGradient>
  </div>;

export default App;

import React from "react";
import ReactDOM from "react-dom";
import App from "./App";

import { ThemeProvider, injectGlobal } from "styled-components";

injectGlobal`
  body {
    margin: 0;
    padding: 2rem;
    font-family: -apple-system,
      BlinkMacSystemFont,
      "Segoe UI",
      Roboto,
      Helvetica,
      Arial,
      sans-serif,
      "Apple Color Emoji",
      "Segoe UI Emoji",
      "Segoe UI Symbol";
  }
`;

const theme = {
  base: "#a04ed9",
  danger: "tomato",
  gradient: `background-color: #00DBDE; background-image: linear-gradient(225deg, #00DBDE 0%, #FC00FF 100%);`
};

ReactDOM.render(
  <ThemeProvider theme={theme}>
    <App />
  </ThemeProvider>,
  document.getElementById("root")
);