Вложение XML в React, где XML-схема имеет недопустимую разметку React

Question

Вариант использования: я вкладываю Google Blockly в компонент React. У меня есть динамически определенный набор инструментов Blockly, и я использую React для их сборки.

Осложняющий фактор: Blockly требует, чтобы наборы инструментов были определены как XML где-то в документе. Эти наборы инструментов выглядят примерно так:

<xml id="toolbox" style="display: none">
  <category name="Control" style="controls_category">
    <block type="controls_if"></block>
    <block type="controls_whileUntil"></block>
    <block type="controls_for">
  </category>
  <category name="Logic" style="logic_category">
    <block type="logic_compare"></block>
    <block type="logic_operation"></block>
    <block type="logic_boolean"></block>
  </category>
</xml>

Попытка решения: иметь компонент React Blockly для панели инструментов, который возвращает теги категории и блока в рендере. Обойти ошибки "нераспознанный тег" с помощью React.createElement.

Проблема: теги категорий используют style отметьте и ожидайте текстовое значение, соответствующее используемому стилю категории. Тем не менее, проверка React для свойства prop вызывает следующую ошибку:

react-dom.development.js:55 Uncaught Error: The `style` prop expects a mapping from style properties to values, not a string. For example, style={{marginRight: spacing + 'em'}} when using JSX.

Вопрос: Как "внедрить" этот XML внутрь компонента React таким образом, чтобы обойти проверку правильности стиля?