小编geo*_*eop的帖子

我正在使用 Material UI 中的“Books”表。它有 3 列：“书号”、“标题”和“章节”。我希望每一章都像列表项一样显示在单独的行中，如下所示：

第1章

第2章

第3章

并不是

第一章 第二章 第三章

我尝试了不同的方法，例如添加“\n”，将其存储在变量中，和/或将其包含在模板文字中，如下所示：

const row2 = "Chapter 1\nChapter 2";
const row4 = `Chapter 1\nChapter 2\nChapter 3`;

const rows = [
  createData("1", "Book 1", "Not Applicable"),
  createData("2", "Book 2", row2),
  createData("3", "Book 3", "Chapter 1\nChapter 2"),
  createData("4", "Book 4", row4)
];

这是完整的代码。

默认情况下，包装器内的文本居中对齐。

如何修改包装规则

    <span class="MuiTab-wrapper">Item One</span>

使选项卡文本左对齐（就像我在开发工具中所做的那样，即使 flex-direction 为“row”）？

我尝试在Material UI 自定义组件文档和内联样式中使用 $ruleName 进行“一次性情况的特定变化”，但无济于事。

这是沙盒链接

（注意：我注释掉了 useStyles 上的 $ruleName 并只留下了内联样式。您不能通过注释掉并尝试一个又一个选项来自己尝试。这些选项都不适合我）。