React - Material UI Typography 如何将长字符串分成多行

Question

我正在使用 ReactJS 和名为 MaterialUI 的组件库。我在使用 Typography 组件时遇到问题。发生的情况是，如果我写一个长文本，它会超出其容器并且不会换行：import React from "react";import { Redirect } from "react-router";import { withRouter } from "react-router-dom";import Container from "@material-ui/core/Container";import CssBaseline from "@material-ui/core/CssBaseline";import Typography from "@material-ui/core/Typography";function Homepage() {  return (    <div>      <React.Fragment>        <CssBaseline />        <Container fixed>          <Typography variant="h1" component="h2" align="center">            123 456 789 qwertyuiopasdfghjklzxcvbnm          </Typography>        </Container>      </React.Fragment>    </div>  );}export default withRouter(Homepage);在图像下方：这发生在移动模式和桌面模式中。你知道如何解决这种行为吗？如果已达到容器的最大宽度，我希望将长单词拆分为新行。

Answer 1

解决方案

使用word-wrap，它适用于 Material-UI 的排版。

wordWrap: "break-word"

演示

<Typography

  variant="h1"

  component="h2"

  align="center"

  style={{ wordWrap: "break-word" }}

>

  123 456 789 qwertyuiopasdfghjklzxcvbnmdfsafasfasfadfaf

</Typography>

Answer 2

我遇到了这个，这是一个很好的解决方案。我最终将它全局添加到我的排版中。如果您需要这个，只需将 keikai 的答案添加到您的 createMuiTheme。

//theme.jsx or theme.tsx

import { createMuiTheme, responsiveFontSizes } from '@material-ui/core/styles';

let theme = createMuiTheme({

  overrides: { 

    MuiTypography: { 

      root: { 

        wordWrap: "break-word"

      }

   } 

  }

});

export default theme;

Answer 3

更新 24-11-2021 createMuiTheme 已弃用有效的新版本：

const theme = createTheme({

    components: {

        MuiTypography: {

            styleOverrides: {

                root: {

                    wordWrap: "break-word"

                },

            },

        },

        MuiCard: {

            styleOverrides: {

                root: {

                    width: "auto",

                    margin: 10,

                },

            },

        },

    },

});