所以我尝试根据用户输入动态对齐文本。例如：用户按下模式按钮上的8：00->左对齐事件标题用户按下8：30->右对齐事件标题
我知道顺风不是为动态变化的风格而设计的，但我对其他造型方法相当缺乏经验（我是一个热情的新手），有人对我应该如何处理这个问题有什么想法吗？
我现在所拥有的
应该处理更改的函数：

function handleLeftAlign() {
    alignEvent("align-left");
  }

  function handleRightAlign() {
    alignEvent("align-right");
  }

  function alignEvent(alignClass: string) {
    // Update the class for the event with the specified ID (idToAlign)
    setAllEvents((prevEvents) =>
      prevEvents.map((event) =>
        Number(event.id) === Number(idToAlign)
          ? { ...event, alignClass: alignClass }
          : event
      )
    );

    // Close the alignment modal and reset the ID
    setShowAlignModal(false);
    setIdToAlign(null);
  }

字符串
在这里我创建事件和它们各自的样式（目前不工作）：

{events.map((event) => (
              <div
                 className={`fc-event border-2 p-1 m-2 w-full rounded-md ml-auto text-center bg-white ${events.title.alignClass}`}>
                title={event.title}
                key={event.id}
              >
                {event.title}
              </div>

型
用户按下的按钮：

<div className="bg-gray-50 px-4 py-3 sm:flex sm:px-6">
                      <button
                        type="button"
                        className="ml-4 inline-flex justify-center rounded-md bg-blue-600 px-3 py-2 text-sm font-semibold text-white 
    shadow-sm hover:bg-blue-500 sm:ml-0 sm:w-auto"
                        onClick={handleLeftAlign}
                      >
                        8:00 AM
                      </button>

                      <button
                        type="button"
                        className="ml-8 inline-flex justify-center rounded-md bg-blue-600 px-3 py-2 text-sm font-semibold text-white 
    shadow-sm hover:bg-blue-500 sm:ml-2 sm:w-auto"
                        onClick={handleRightAlign}
                      >
                        8:30 AM
                      </button>

型