如何将最大高度添加到我的 ScrollToBottom 组件？

Question

我目前正在尝试为我的组件设置一个 maxHeight，因为当我添加内容（来自用户的消息）时，它会不断增加整个页面的高度，但它似乎不起作用。我正在使用库 'react-scroll-to-bottom'.

中的 ScrollToBottom

谢谢:)

    messageContainer: {
        display: 'flex',
        height: '100px',
        overflowY: 'scroll',
        overflowX: 'hidden',
    },

<ScrollToBottom classes={classes.messageContainer}>
{messageList.map((data) => {
    return (
        <div
            className={classes.message}
            id={username === data.author ? "you" : "other"}
        >
            <div>
                <div className={classes.messageMeta} id={username === data.author ? "you" : "other"}>
                    <p id='time'>{data.time}</p>    
                    <p id='author'>{data.author}</p>
                </div>
                <div className={classes.messageContent}>
                    <h4 style={{textAlign: 'right'}} id={username === data.author ? "you" : "other"}>
                         {data.message} 
                    </h4>
                </div>
            </div>
        </div>
        );
})}
</ScrollToBottom>

Answer 1

我用 div 包装了 <ScrollToBottom/> 并将样式应用到 div 并且它有效..顺便说一句，当我尝试将 css 设置为 <ScrollToBottom/> 并且它还没有应用 css .. 我的建议是一个简单的修复

const ScrollFunc = () => {
  const para = (
    <p>
      Laboris duis do consectetur aliquip non aliquip ad ad quis minim. Aute
      magna tempor occaecat magna fugiat culpa. Commodo id eiusmod ea pariatur
      consequat fugiat minim est anim. Ipsum amet ipsum eu nisi. Exercitation
      minim amet incididunt tempor do ut id in officia eu sit est. Dolor qui
      laboris laboris tempor sunt velit eiusmod non ipsum exercitation ut sint
      ipsum officia.
    </p>
  );

  const [paralist, setParaList] = useState(para);

  return (
    <div style={{
      display: 'flex',
      flexDirection: 'column',
      height: '100px',
      overflowY: 'scroll',
      border: 'solid 1px blue',
    }}>
    <ScrollToBottom>
      <button
        onClick={() => {
          const newPara = (
            <>
              {paralist}
              <br></br>
              {para}
            </>
          );
          setParaList(newPara);
        }}
      >
        Add para
      </button>
      {paralist}
    </ScrollToBottom>
    </div>
  );
};

演示@link

如何将最大高度添加到我的 ScrollToBottom 组件？

How to add max height to my ScrollToBottom component?

css

jsx

reactjs

material-ui