Блог

Я добавил <Planet/> (из react-planet) в свое приложение, и изменилось размещение некоторых <Grid/> компонентов (из пользовательского интерфейса Material).

Заглядывая внутрь «Элементов» в DevTool, я заметил, что разделы внутри <Planet/> компонента имеют два класса jss3 и jss{i} где i находится следующее целое число. Каждый из них имеет различные свойства внутри, которые перезаписывают каждый компонент приложения, использующего один из jss{i} классов.

Я также заметил, что на первой i итерации рендеринга, которая jss{i} применяется к вновь созданным дивам, начинается с 1 и заканчивается 9 — потому что у меня 6 планет, поэтому 1 для основного дива, 2 для центральной планеты, 3 для первого класса дивов и 4-9 для второго класса шести дивов. После второго рендеринга число увеличивается с 10 до 18.

Скриншоты элементов при первом рендеринге и втором.

Пример class ={jss3 jss4}

Пример class ={jss3 jss5}

Я предполагаю , что после создания page by <Planet/> , чьи дочерние элементы имеют два класса , вновь созданный класс jss{i} , основанный на makeStyles-root-{i} , перезаписывает свойства jss{i} , которые используются где-то еще на <Grid/> компонентах page by, таким образом, изменяя размещение для всей страницы.

Код, в котором <Planet/> используется компонент:

 return (
    <Grid
      item
      container
      justifyContent = "center"
      style = {{ margin: 30 }}
    >
      <Planet
        centerContent={
          <Fab size="small" color="primary" aria-label="add" onClick={handleOpen}>
            <AddIcon />
          </Fab>
        }
        open={isOpen}
        autoClose
        orbitRadius= {50}
        rotation = {90}
        hideOrbit
        friction = {20}
      >
        <div/>
        <div/>
        <div/>
        <Fab size="small" color="primary" aria-label="addBarIcon" onClick={handleChartAddLineChart}>
          <ShowChartIcon />
        </Fab>
        <Fab size="small" color="primary" aria-label="addBarIcon" onClick={handleChartAddBarChart}>
          <BarChartIcon />
        </Fab>
        <Fab size="small" color="primary" aria-label="addBarIcon" onClick={handleChartAddPieChart}>
          <PieChartIcon />
        </Fab>
      </Planet>
    </Grid>
  );
 

Я попытался поместить <div/> внутрь только компоненты <Planet/> , но ничего не изменилось. Переход с <Grid/> обычного на нормальный <div/> тоже ничего не изменил.
Кроме того, я пытался найти аналогичную проблему в StackOverflow или где-то еще, но я не уверен, как описать проблему, используя правильные ключевые слова.

Я не уверен, является ли это какой-то ошибкой в react-planet библиотеке, которая делает react-planet material-ui невозможным совместное использование, или в моем коде есть проблема.

Я не уверен, что именно стало причиной ошибки «умножение класса в одном компоненте», но я скопировал Planet.tsx и Orbit.tsx из репозитория react-planet и изменил некоторый код, избавился от стилей создания и решил проблему. Вероятно, это были вложенные стили создания во всех компонентах react-planet, которые конфликтовали друг с другом на разных уровнях рендеринга компонентов, что приводило к многократному рендерингу в одном объекте.

Кроме того, он переопределял стили компонентов пользовательского интерфейса Material из-за упрощенного именования классов из MUI makeStyle в класс css при создании производства (makeStyles-root — {i} — > jss{i}, makeStyles — > > jss).

Переопределение стилей, вероятно, было вызвано зависимостью react-planets от старой/другой версии MUI, чем у меня для остальной части кода, которая создала два генератора стилей для каждой из этих версий, как указано в FAQ по MUI. Первый генератор создал класс из makeStyle для всей моей страницы, называя каждый класс jss{i } для i, начиная с i=1 и заканчивая переименованием всех классов, затем генератор react-planet создал стили для своих объектов, называя каждый класс jss{i }, начиная с i=1, что приводит к переопределению каждого предыдущего класса=jss{i} с новыми свойствами.