在 div jsx 中创建样式 - Javascript

在 React 中使用 jsx 构建 UI 界面时，我们可以在 jsx 标签内部通过 style 属性添加样式。例如，我们可以使用下面的代码在 div 元素中添加背景色和边框样式：

<div style={{backgroundColor: 'blue', border: '1px solid black'}}>Hello, world!</div>

我们可以通过一个对象来设置 style 属性的值。在这个对象中，我们可以添加任意数量的样式属性。在上面的例子中，我们定义了两个的样式属性：backgroundColor 和 border。

可以将这些样式属性组合成一个对象，然后将这个对象传递给 style 属性。

除了简单的样式属性外，我们还可以使用复合样式属性来设置多个样式属性。例如，下面的代码演示了如何使用复合样式属性设置 padding 和 margin：

const styles = {
  outerDiv: {
    padding: '10px',
    margin: '20px',
  },
  innerDiv: {
    backgroundColor: 'blue',
    border: '1px solid black',
  },
};

<div style={styles.outerDiv}>
  <div style={styles.innerDiv}>Hello, world!</div>
</div>

在这个例子中，我们定义了两个样式对象：outerDiv 和 innerDiv。我们可以将这两个样式对象传递给不同的元素，以便对这些元素应用不同的样式。

综上所述，使用 style 属性可以让我们以一种简单和声明性的方式为我们的 React 应用添加样式。可以通过简单的样式属性或复合样式属性来设置任意数量的样式属性。