如何使用styled-components和React高效地为组件添加变体

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

// 定义基础按钮组件
const BaseButton = styled.button`
  padding: 10px 20px;
  border-radius: 5px;
  font-size: 16px;
  cursor: pointer;
`;

// 定义变体
const ButtonVariants = {
  primary: {
    backgroundColor: 'blue',
    color: 'white',
    border: 'none',
  },
  secondary: {
    backgroundColor: 'white',
    color: 'black',
    border: '1px solid black',
  },
};

// 创建带有变体的按钮组件
const Button = ({ variant, children, ...props }) => {
  const variantStyles = ButtonVariants[variant];
  return (
    <BaseButton {...props} style={variantStyles}>
      {children}
    </BaseButton>
  );
};

export default Button;

import React from 'react';
import ReactDOM from 'react-dom';
import Button from './Button';

const App = () => {
  return (
    <div>
      <Button variant="primary">Primary Button</Button>
      <Button variant="secondary">Secondary Button</Button>
    </div>
  );
};

ReactDOM.render(<App />, document.getElementById('root'));

// 确保传递正确的 variant 属性
<Button variant="primary">Primary Button</Button>

// 确保 ButtonVariants 对象中包含对应的样式定义
const ButtonVariants = {
  primary: {
    backgroundColor: 'blue',
    color: 'white',
    border: 'none',
  },
  secondary: {
    backgroundColor: 'white',
    color: 'black',
    border: '1px solid black',
  },
};