如何更改ColorDialog的标题？

document.getElementsByClassName("color-dialog-title")[0].innerHTML = "新标题";

.color-dialog-title {
  font-size: 20px;
  font-weight: bold;
  color: #333;
}

<div class="color-dialog">
  <div class="color-dialog-title">新标题</div>
  <div class="color-dialog-content">
    <!-- 在这里添加ColorDialog的内容 -->
  </div>
</div>

import React from "react";

function ColorDialog() {
  return (
    <div className="color-dialog">
      <div className="color-dialog-title">新标题</div>
      <div className="color-dialog-content">
        {/* 在这里添加ColorDialog的内容 */}
      </div>
    </div>
  );
}

export default ColorDialog;

  <div class="color-dialog">
    <div class="color-dialog-title">新标题</div>
    <div class="color-dialog-content">
      <!-- 在这里添加ColorDialog的内容 -->
    </div>
  </div>
</template><script>
export default {
  name: "ColorDialog",
};
</script>