Javascript 反应物料UI包装表格行

所以我在下面有一张表，我使用的是MaterialUI和React表。我试图了解如何从TableRow包装文本，但到目前为止我一直没有成功。有人知道什么是最好的方法吗？下面是我的代码。我认为添加空格和文字包装就可以了，但事实似乎并非如此

import React from "react";
import { useTable} from "react-table";
import MaUTable from "@material-ui/core/Table";
import TableBody from "@material-ui/core/TableBody";
import TableCell from "@material-ui/core/TableCell";
import TableHead from "@material-ui/core/TableHead";
import TableRow from "@material-ui/core/TableRow";

const data = [
    { location: "Location 1", monday: ["8:00 AM","9:00 AM"], tuesday: ["8:00 AM","9:00 AM"], wednesday:["8:00 AM","9:00 AM"], thursday:["8:00 AM","9:00 AM"],friday:["8:00 AM","9:00 AM"] },
    { location: "Location 2", monday: ["8:00 AM","9:00 AM"], tuesday: ["8:00 AM","9:00 AM"], wednesday:["8:00 AM","9:00 AM"], thursday:["8:00 AM","9:00 AM"],friday:["8:00 AM","9:00 AM"] }
];

const columns = [
    {
        Header: "Shop",
        columns: [
            {
                Header: "Location",
                accessor: "location"
            },
            {
                Header: "Monday",
                accessor: "monday"
            },
            {
                Header: "Tuesday",
                accessor: "tuesday"
            },
            {
                Header: "Wednesday",
                accessor: "wednesday"
            },
            {
                Header: "Thursday",
                accessor: "thursday"
            },
            {
                Header: "Friday",
                accessor: "friday"
            },
        ]
    }
];

const Table = ({ columns, data }) => {
    const {
        getTableProps,
        getTableBodyProps,
        headerGroups,
        rows,
        prepareRow
    } = useTable({
        columns,
        data
    }

    );

    return (
        <MaUTable {...getTableProps()}>
            <TableHead>
            {headerGroups.map(headerGroup => (
                <TableRow {...headerGroup.getHeaderGroupProps()}>
                    {headerGroup.headers.map(column => (
                        <TableCell {...column.getHeaderProps()}>{column.render("Header")}</TableCell>
                    ))}
                </TableRow>
            ))}
            </TableHead>
            <TableBody {...getTableBodyProps()}>
            {rows.map((row, i) => {
                prepareRow(row);
                return (
                    <TableRow  style={{whiteSpace: "normal", wordWrap: "break-word"}} {...row.getRowProps()}>
                        {row.cells.map(cell => {
                            return <td {...cell.getCellProps()}>{cell.render("Cell")}</td>;
                        })}
                    </TableRow>
                );
            })}
            </TableBody>
        </MaUTable>
    );
};

export default function App() {
    return (
        <div className="App">
            <Table columns={columns} data={data} />
        </div>
    );
}

从“React”导入React；
从“反应表”导入{useTable}；
从“@material ui/core/Table”导入表格；
从“@material ui/core/TableBody”导入表体；
从“@material ui/core/TableCell”导入TableCell；
从“@material ui/core/TableHead”导入表头；
从“@material ui/core/TableRow”导入TableRow；
常数数据=[
{地点：“地点1”，星期一：[“上午8:00”，“上午9:00”]、星期二：[“上午8:00”，“上午9:00”]、星期三：[“上午8:00”，“上午9:00”]、星期四：[“上午8:00”，“上午9:00”]、星期五：[“上午8:00”，“上午9:00”]，
{地点：“地点2”，星期一：[“8:00 AM”，“9:00 AM”]、星期二：[“8:00 AM”，“9:00 AM”]、星期三：[“8:00 AM”，“9:00 AM”]、星期四：[“8:00 AM”，“9:00 AM”]、星期五：[“8:00 AM”，“9:00 AM”]
];
常量列=[
{
标题：“商店”，
栏目：[
{
标题：“位置”，
访问者：“位置”
},
{
标题：“星期一”，
访问者：“星期一”
},
{
标题：“星期二”，
访问者：“星期二”
},
{
标题：“星期三”，
访问者：“星期三”
},
{
标题：“星期四”，
访问者：“星期四”
},
{
标题：“星期五”，
访问者：“星期五”
},
]
}
];
常量表=（{列，数据}）=>{
常数{
可获取的道具，
getTableBodyProps，
校长组，
排，
预制员
}=可用({
柱，
数据
}
);
返回(
{headerGroups.map（headerGroups=>(
{headerGroup.headers.map（列=>(
{column.render（“Header”）}
))}
))}
{rows.map（（row，i）=>{
准备工作（世界其他地区）；
返回(
{row.cells.map（cell=>{
返回{cell.render（“cell”）}；
})}
);
})}
);
};
导出默认函数App（）{
返回(
);
}

您可以将

显示设置为
内联块，而不是使用
空白
和
文字包装
，将每个值包装在
span
标记上

const Cell=（{Cell}）=>{
返回cell.value.map（（值，索引）=>(
{value}
));
};

const列=[
{
标题：“商店”，
栏目：[
{
标题：“位置”，
访问者：“位置”
},
{
标题：“星期一”，
访问者：“星期一”，
单元格：（{Cell}）=>
},
{
标题：“星期二”，
访问者：“星期二”，
单元格：（{Cell}）=>
},
{
标题：“星期三”，
访问者：“星期三”，
单元格：（{Cell}）=>
},
{
标题：“星期四”，
访问者：“星期四”，
单元格：（{Cell}）=>
},
{
标题：“星期五”，
访问者：“星期五”，
单元格：（{Cell}）=>
}
]
}
];



我认为
wordWrap
不起作用，可能是因为当你有
8:00am 9:00pm
-
8:00
，
AM
，
9:00
和
PM
这样的文本时，它们被认为是独立的单词。但不确定。
它似乎起作用了。这回答了你的问题吗@bertdida我想做的是获取“星期一”“星期二”等的td数据，将其包装为显示“上午9:00”，然后在上午10:00等底部进行包装。很好，我最终将内联块更改为网格，这样它就可以包装下面的时间。是的。这也行，我想您可以使用
网格间距
给出每次之间的间距。：）