样式化-组件:使用附加道具扩展现有组件以设置样式

// Button.jsx
import React from 'react';
import './Button.css';

const Button = ({ children, className, style, type }) => {
  return (
    <button className={`button ${className}`} style={style} type={type}>
      {children}
    </button>
  );
};

export default Button;

/* Button.css */
.button {
  padding: 10px 20px;
  font-size: 16px;
  border: none;
  cursor: pointer;
}

.button.primary {
  background-color: blue;
  color: white;
}

.button.secondary {
  background-color: gray;
  color: black;
}

import React from 'react';
import Button from './Button';

const App = () => {
  return (
    <div>
      <Button className="primary">Primary Button</Button>
      <Button className="secondary" style={{ backgroundColor: 'green' }}>
        Custom Style Button
      </Button>
    </div>
  );
};

export default App;

<Button style={{ backgroundColor: 'red' }}>Red Button</Button>

<Button style={{ background-color: 'red' }}>Red Button</Button>

<Button className="primary">Primary Button</Button>

import './Button.css';