Блог

У меня есть такой фрагмент:

 {!condition ? (
<>
<Box m={2} marginLeft={{ sm: '0', md: '-10%', lg: '-10%' }}>
   First Block
</Box>
</>) : (<>
<Box m={1}>

  //second block
</Box>
</>
)}
 

Как вы можете видеть, когда условие ложно, я визуализирую первый блок, а другой-второй. Это происходит правильно. Проблема в том, что при рендеринге второго блока он принимает этот css:
marginLeft={{ sm: '0', md: '-10%', lg: '-10%' }}

Вот это странно. Это потому, что первый <Box> из первого блока мешает второму блоку?

PS Я случайно заметил эту проблему ранее, а также в аналогичной ситуации. В то время опора mb на <Box> и {m} на другом <Box> создавала аналогичную проблему.

PPS В нашем проекте мы используем сборник рассказов, в котором мы создаем компонент пользовательского интерфейса и устанавливаем его в приложение во время интеграции компонента. В Сборнике рассказов он ведет себя правильно. Проблема возникает с компонентом приложения при установке SB.