Проблемы с запуском примера `@carbon` `elkjs`

Я не могу заставить работать следующую схему IBM Carbon Design elkjs:

https://codesandbox.io/s/carbon-charts-react-elkjs-diagram-b9xyp

Ниже приведен код в моем App.js:

import './App.scss';
import { 
  Button,
  Grid,
  Column,
  Content
} from '@carbon/react';
import React, { useEffect, useState } from 'react';
import _config from './AppConfig.development.js';
import IdeHeader from './components/IdeHeader/IdeHeader';
import IdeSideNavMenu from './components/IdeSideNavMenu';
import Elk from './components/IdeElk';

const App = () =>
{
  const [isError, setIsError] = useState(false);
  const [errorReference, setErrorReference] = useState("");
  const [errorMessage, setErrorMessage] = useState("");
  const [isLoading, setIsLoading] = useState(false);

  const size = 48;

  const nodeData = [
    { id: "a", height: size, width: size },
    { id: "b", height: size, width: size },
    { id: "c", height: size, width: size },
    { id: "d", height: size, width: size },
    { id: "e", height: size, width: size },
    { id: "f", height: size, width: size },
    { id: "g", height: size, width: size },
    { id: "h", height: size, width: size }
  ];

  const linkData = [
    { id: "1", source: "a", target: "b" },
    { id: "2", source: "c", target: "b" },
    { id: "3", source: "d", target: "e" },
    { id: "4", source: "d", target: "b" },
    { id: "5", source: "b", target: "f" },
    { id: "6", source: "g", target: "h" },
    { id: "7", source: "h", target: "f" }
  ];


  

  useEffect(() =>
  {
    
  }, [])

  return (
    <>
      <IdeHeader />
      <IdeSideNavMenu />
      <Content>
        <Grid className='bx-main'>
            <Column xlg={16}>
              <Elk nodes={nodeData} links={linkData} layout="layered" />
            </Column>
        </Grid>
      </Content>
    </>
  );
}

export default App;

Код в ./components/IdeElk точно такой же, как и в приведенной выше песочнице.

Но вместо того, чтобы получить такой вывод:

enter image description here

Вместо этого я получаю такой вывод:

enter image description here

Что я здесь делаю не так?

Формы c голосовым вводом в React с помощью Speechly
Формы c голосовым вводом в React с помощью Speechly
Пытались ли вы когда-нибудь заполнить веб-форму в области электронной коммерции, которая требует много кликов и выбора? Вас попросят заполнить дату,...
В чем разница между Promise и Observable?
В чем разница между Promise и Observable?
Разберитесь в этом вопросе, и вы значительно повысите уровень своей компетенции.
Сравнение структур данных: Массивы и объекты в Javascript
Сравнение структур данных: Массивы и объекты в Javascript
Итак, вы изучили основы JavaScript и хотите перейти к изучению структур данных. Мотивация для изучения/понимания Структур данных может быть разной,...
Создание собственной системы электронной коммерции на базе Keystone.js - настройка среды и базовые модели
Создание собственной системы электронной коммерции на базе Keystone.js - настройка среды и базовые модели
Прошлая статья была первой из цикла статей о создании системы электронной коммерции с использованием Keystone.js, и она была посвящена главным образом...
Приложение для отслеживания бюджета на React js для начинающих
Приложение для отслеживания бюджета на React js для начинающих
Обучение на практике - это проверенная тема для достижения успеха в любой области. Если вы знаете контекст фразы "Практика делает человека...
Стоит ли использовать React в 2022 году?
Стоит ли использовать React в 2022 году?
В 2022 году мы все слышим о трендах фронтенда (React, Vue), но мы не знаем, почему мы должны использовать эти фреймворки, когда их использовать, а...
1
0
16
1
Перейти к ответу Данный вопрос помечен как решенный

Ответы 1

Ответ принят как подходящий

Нашел проблему. В App.js мне не хватило следующего:

// Charting styles
import "@carbon/charts/styles.css";

Другие вопросы по теме