npm 을 통해 styled-components 를 다운로드 후

import logo from "./logo.svg";
import "./App.css";
import StyledButton from "./Components/StyledButton";
import styled from "styled-components";

const PrimaryStyledButton = styled(StyledButton)`
  background: pink;
  color: white;
`;

const UppercaseButton = (props) => (
  <button {...props} children={props.children.toUpperCase()} />
);

const MyButton = (props) => (
  <button
    className={props.className}
    {...props}
    children={`MyButton ${props.children}`}
  />
);

const StyledMyButton = styled(MyButton)`
  background: transparent;
  border-radius: 3px;
  border: 2px solid ${(props) => props.color || "pink"};
  color: ${(props) => props.color || "pink"};
  margin: 0 1em;
  padding: 0.25em 1em;
  font-size: 20px;

  :hover {
    border: 2px solid red;
  }
`;
function App() {
  return (
    <div className="App">
      <header className="App-header">
        <img src={logo} className="App-logo" alt="logo" />
        <p>
          <StyledButton>버튼</StyledButton>
          <StyledButton primary>버튼</StyledButton>
          <PrimaryStyledButton>버튼</PrimaryStyledButton>
          <StyledButton as={UppercaseButton}>button</StyledButton>
          <StyledMyButton>button</StyledMyButton>
          <StyledMyButton color="green">button</StyledMyButton>
        </p>
      </header>
    </div>
  );
}

export default App;

props 에 스타일을 주어 원하는 컴포넌트에 삽입 할 수 있고
변경 및 재사용이 가능함