Типография в React Material-UI - PullRequest
Новая
       12

Типография в React Material-UI

0 голосов
/ 23 сентября 2018

У меня есть это текстовое поле: 

<Typography component="p" className={classes.text}>
        {this.props.post.text}
</Typography>

Я хотел бы иметь возможность включать абзацы, но весь введенный в него текст печатается в одну строку.

Документация предполагает, чтоparagraph по умолчанию false, поэтому я должен установить его в `true.

Я пробовал следующее: 

<Typography component="p" className={classes.text} paragraph="true">

Я также пытался: 

<Typography component="p" className={classes.text} paragraph={true}>

Ни то, ни другое, поэтому весь мой текст по-прежнему печатается в одну строку.

Как мне показать абзацы?

Дополнительная информация: Как я теперь понимаюатрибут attribute = {true} в типографии просто добавляет нижнее поле ко всему тексту .То есть мой единственный блок текста - это абзац.Если я хочу еще один абзац, я должен добавить еще Typography.Что-то вроде: 

<Typography component="p" className={classes.text} paragraph={true}>
        {this.props.post.text}
</Typography>
<Typography component="p" className={classes.text} paragraph={true}>
        {this.props.post.text2}
</Typography>

Это не совсем то, что я хочу.Возможно, я должен стремиться к тому, чтобы символы возврата во входном тексте были распознаны.Это правильно, и если да, то как это делается?

Я пробовал это: 

<code>  <pre>
    <Typography component="p" className={classes.text}>
      {this.props.post.text}
    </Typography>

Тег сохраняет пробелы и разрывы строк внутри тегов, как есть.

Это не подходит, хотя.Если у меня длинная строка, текст не переносится на ширину карты.Вместо этого что-либо за пределами ширины карты становится усеченным.Очевидно, я хочу все это.Я хочу, чтобы мой текст был обернут в карточку, а также чтобы он поддерживал новые строки и абзацы.Как это сделать?

Ответы [ 5 ]

0 голосов
/ 13 января 2019

Для новых абзацев 

<Typography>
  {this.props.text.split("\n").map((i, key) => {
    return <p key={key}>{i}</p>;
  })}
</Typography>

Для просто новых строк 

<Typography>
  {this.props.text.split("\n").map((i, key) => {
    return <div key={key}>{i}</div>;
  })}
</Typography>
0 голосов
/ 06 ноября 2018

Я попробовал ваш ответ, и он отлично работал по мере необходимости.Однако консоль возвращает незначительную ошибку

Предупреждение: validateDOMNesting (...): <p> не может отображаться как потомок <p>.

Улучшенослегка ответьте на свой вопрос, заменив теги <p> в .map() на <Typography> и обернув все в <div>, например, так: 

<div className={classes.text}>
  {this.props.post.text.split('\n').map((i, key) => {
    return <Typography key={key} paragraph variant="body1">{i}</Typography>;
  })}
</div>

(вы можете заменить body1с любым вариантом, который вы хотите!)

Это, кажется, избавляет меня от предупреждения, и я надеюсь, что работает, как вы хотели.

0 голосов
/ 07 октября 2018

Если я правильно понял, вы можете просто использовать возможности HTML и добавить <br /> -элементы для вставки разрывов строк.

0 голосов
/ 07 октября 2018

Я придумал это: 

<Typography component="p" className={classes.text}>
  {this.props.post.text.split("\n").map((i, key) => {
    return <p key={key}>{i}</p>;
  })}
</Typography>

Если есть лучший способ сделать это, я бы очень хотел это услышать.

0 голосов
/ 23 сентября 2018

Это действительно странное поведение.Из того, что я могу сказать, вы все делаете правильно.p сам по себе отображается как элемент блока, поэтому по умолчанию он должен отображаться так, как вы хотите.Но, возможно, вы переопределяете это в своем .text классе CSS.Попробуй посмотреть, есть ли у тебя проблемы.Если нет, вы всегда можете использовать вариантное свойство variant="headline", чтобы поместить их в новые строки.

...