Сворачивание всего содержимого элемента (кроме одного) без упаковки в div

Question

У меня есть компонент кнопки React, который отображает его содержимое и передает информацию о стиле / классе кнопке:

<button {...props}>
   {content}
</button>

Это отлично сработало, проблема в том, что я добавил поддержку состояния «загрузка» , для отправки формы et c:

<button {...props}>
   <span style={{ visibility: ${requestStatus === "request" ? "collapse" : "visible"}}>
     {content}
   </span>
   <span className="center-content">
     <LoadingIndicator />
   </span>
</button>

Это отлично работает для кнопок с одним элементом, например:

<MyButton>My Content</MyButton>

Но это ломает любую более сложную кнопку, где я проходя через className или style и хотите стилизовать внутреннее отображение кнопки. Например:

<MyButton className="d-flex align-items-center">
    <MyIcon/>
    <span>My Content</span>
</MyButton>

Flex не применяется к контенту, потому что он заключен в диапазон.

Я подумал попробовать использовать селектор CSS для всех дочерних элементов и переопределите его для индикатора загрузки:

.my-button > * {
  visibility: ${(props) =>
   props.requestStatus === "request" ? "collapse" : "visible"};
}

.my-button .skip {
  visibility: visible;
}

Работает нормально, пока вы не передадите контент, который не заключен в диапазон, например <MyButton>My Content</MyButton>. Я попытался передать это в функцию и проверить typeof content === "string", а затем обернуть его в диапазон. Сработало нормально! За исключением случая:

<MyButton className="d-flex align-items-center">
    <MyIcon/>
    My Content
</MyButton>

Это передано как фрагмент реакции (<><MyIcon/>My Content</>), поэтому проверка строки не выполняется, но второй элемент отображается как строка без элемента в HTML , поэтому селектор css .my-button > * не выбирает его.

Кто-нибудь знает, как я могу надежно выбрать этот текстовый контент? Вот примерный HTML / CSS для состояния загрузки:

  button > * {
    visibility: collapse;
  }

  button .skip {
    visibility: visible;
  }

<button style="display: flex; align-items: center; margin-top: 2rem;">
  <span>Icon</span>
  I want this content to be 'collapsed' in this state
  <span class="skip">Loading...</span>
</button>