将HTML/CSS/JS主题应用于React应用程序的正确方法

// theme.js
export const theme = {
  colors: {
    primary: '#007bff',
    secondary: '#6c757d',
  },
  fonts: {
    body: 'Arial, sans-serif',
    heading: 'Helvetica, sans-serif',
  },
};

// ThemedButton.js
import React from 'react';
import styled from 'styled-components';
import { theme } from './theme';

const StyledButton = styled.button`
  background-color: ${theme.colors.primary};
  color: white;
  font-family: ${theme.fonts.body};
  padding: 10px 20px;
  border: none;
  border-radius: 5px;
  cursor: pointer;
`;

function ThemedButton({ children }) {
  return <StyledButton>{children}</StyledButton>;
}

export default ThemedButton;

// App.js
import React from 'react';
import ThemedButton from './ThemedButton';

function App() {
  return (
    <div>
      <h1>Welcome to My App</h1>
      <ThemedButton>Click Me!</ThemedButton>
    </div>
  );
}

export default App;