使用React编写内联样式

React是一种流行的JavaScript库，用于构建用户界面。它提供了一种简洁而强大的方式来处理组件化开发，并允许我们使用内联样式来为组件添加样式。在本文中，我们将介绍如何在React中编写内联样式，并提供相应的源代码示例。

React中的内联样式是使用JavaScript对象表示的。我们可以在组件的style属性中定义这些对象，以应用样式。下面是一个简单的示例，展示了如何在React中使用内联样式：

import React from 'react';

const MyComponent = () => {
  const styles = {
    container: {
      backgroundColor: 'blue',
      padding: '20px',
    },
    text: {
      color: 'white',
      fontSize: '16px',
    },
  };

  return (
    <div style={styles.container}>
      <h1 style={styles.text}>Hello, World!</h1>
    </div>
  );
};

export default MyComponent;

在上面的例子中，我们创建了一个名为MyComponent的函数组件。在组件中，我们定义了一个名为styles的对象，其中包含了两个样式对象：container