为带样式的组件创建通用道具

// Button.js
import React from 'react';
import PropTypes from 'prop-types';
import './Button.css';

const Button = ({ label, onClick, type, size }) => {
  const buttonClass = `button ${type} ${size}`;

  return (
    <button className={buttonClass} onClick={onClick}>
      {label}
    </button>
  );
};

Button.propTypes = {
  label: PropTypes.string.isRequired,
  onClick: PropTypes.func,
  type: PropTypes.oneOf(['primary', 'secondary']),
  size: PropTypes.oneOf(['small', 'medium', 'large']),
};

Button.defaultProps = {
  type: 'primary',
  size: 'medium',
};

export default Button;

/* Button.css */
.button {
  padding: 10px 20px;
  border: none;
  border-radius: 5px;
  cursor: pointer;
}

.primary {
  background-color: #007bff;
  color: white;
}

.secondary {
  background-color: #6c757d;
  color: white;
}

.small {
  font-size: 14px;
}

.medium {
  font-size: 16px;
}

.large {
  font-size: 18px;
}

// 使用styled-components示例
import styled from 'styled-components';

const StyledButton = styled.button`
  padding: ${props => props.size === 'small' ? '10px 15px' : '15px 20px'};
  background-color: ${props => props.type === 'primary' ? '#007bff' : '#6c757d'};
  color: white;
  border: none;
  border-radius: 5px;
  cursor: pointer;
`;

const Button = ({ label, onClick, type, size }) => {
  return (
    <StyledButton type={type} size={size} onClick={onClick}>
      {label}
    </StyledButton>
  );
};