Как переносить строку в MUI React?

Question

[Archie_7]

Имеется код

const OverDiv = (props) => (
  <Divider
      absolute={true}
      sx={{
        top: "100px",
        left: "20px",
      }}
    >
      {props.children}    
  </Divider>
) 

const HomeText = (props) => (
  <Typography
      variant='h1'
      component="h2"
      sx={{
        color: "white",
        fontWeight: "bolder"
      }}
    >
      {props.children}    
  </Typography>
) 

const Home = () => {
  return (
    <>
      <Divider>
        <img src={sourse}/>
        <OverDiv>
          <HomeText>Просто какой-то рандомный текст в 2 строки, а может и больше</HomeText>
          <Button>Текст кнопки</Button>
        </OverDiv>
      </Divider>
      
    </>
  )
}

на страницу сайта в итоге выводится текст в одну строку. Как сделать так, чтобы текст переносился на следующую строку в зависимости от ширины экрана?

Answer 1

[Pasha]

const HomeText = (props) => (
  <Typography
    variant='h1'
    component="h2"
    sx={{
      color: "white",
      fontWeight: "bolder",
      maxWidth: {
        xs: "95%",  // для мобильных
        sm: "85%",  // для планшетов
        md: "80%"   // для десктопов
      },
      wordWrap: "break-word"
    }}
  >
    {props.children}    
  </Typography>
)

Comments

[Archie_7]

Проблема решена при использовании стандартного div, но почему-то совсем не работает, если использовать Divider.
В любом случае, большое спасибо!