Styled-components를 사용하여 React에서 사용자 정의 버튼을 만들려고했습니다.

Custom Button 만들기

import CustomButton from "./components/CustomButton.component";

function App() {
  return (
    <div className="App">
      <h1>Let's Build Custom Buttons!</h1>

      <p>Basic Button Theme</p>
      <CustomButton onClick={() => {console.log('You have become a member!!')}}> Become a member </CustomButton>

      <p>Inverted Theme</p>
      <CustomButton inverted> Subscribe </CustomButton>

      <p>Large Size</p>
      <CustomButton large> Styled-components </CustomButton>
    </div>
  );
}

절차

import React from "react";

import { ButtonContainer } from "./CustomButton.styles";

const CustomButton = ({ children, ...otherProps }) => {
  return <ButtonContainer {...otherProps}> {children} </ButtonContainer>;
};

export default CustomButton;

import styled, { css } from "styled-components";

const invertedStyles = css`
  background-color: #065fd4;
  color: #fff;
`;

const largeStyles = css`
  width: 200px;
  height: 80px;
  font-size: 18px;
`;

const getStyles = props => {
  if (props.inverted) {
    return invertedStyles;
  }

  if (props.large) {
    return largeStyles;
  }
};

export const ButtonContainer = styled.button`
  width: 150px;
  height: 50px;

  background-color: #ffffff;
  color: #065fd4;

  border: 1px solid #065fd4;
  font-size: 14px;

  outline: none;
  cursor: pointer;

  ${getStyles}
`;