设计材料ui React组件的样式

const styles = {
  container: {
    backgroundColor: '#F5F5F5',
    padding: '20px',
    borderRadius: '5px',
  },
  title: {
    fontSize: '24px',
    fontWeight: 'bold',
    color: '#333',
  },
};

function MyComponent() {
  return (
    <div style={styles.container}>
      <h1 style={styles.title}>Hello, Material UI!</h1>
    </div>
  );
}

import styles from './MyComponent.module.css';

function MyComponent() {
  return (
    <div className={styles.container}>
      <h1 className={styles.title}>Hello, Material UI!</h1>
    </div>
  );
}

import styled from 'styled-components';

const Container = styled.div`
  background-color: #F5F5F5;
  padding: 20px;
  border-radius: 5px;
`;

const Title = styled.h1`
  font-size: 24px;
  font-weight: bold;
  color: #333;
`;

function MyComponent() {
  return (
    <Container>
      <Title>Hello, Material UI!</Title>
    </Container>
  );
}