如何设置与Material-UI的大纲文本字段类似的静态大纲div？

<div class="outline-container">
  <!-- 大纲内容将在这里显示 -->
</div>

.outline-container {
  border: 1px solid #ccc;  /* 设置边框样式 */
  padding: 10px;  /* 设置内边距 */
  background-color: #f5f5f5;  /* 设置背景颜色 */
  font-family: Arial, sans-serif;  /* 设置字体 */
  font-size: 14px;  /* 设置字体大小 */
  line-height: 1.5;  /* 设置行高 */
  color: #333;  /* 设置文字颜色 */
}

<div class="outline-container">
  <h1>大纲标题1</h1>
  <h2>大纲标题2</h2>
  <h3>大纲标题3</h3>
  <!-- 可以根据需要添加更多的标题级别 -->
</div>