Material UI实现Accordion标题从上到下垂直文字效果无效如何解决

代码不生效的核心原因是CSS属性值写错：

• writing-mode 不存在 vertical 这个合法取值，该属性控制文本流排布方向，要实现从左到右的竖排标题+横向展开布局，需要使用vertical-lr取值（含义是行内文本从上到下排列，块级元素沿从左到右的方向堆叠，完全匹配左展开Accordion的布局逻辑）
• text-orientation 属性仅在非水平writing-mode下生效，属性值写错的情况下自然不会有任何效果。

直接修正Typography组件的sx属性即可实现从上到下正立排列的文本效果：

<Typography
  sx={{
    writingMode: 'vertical-lr',
    textOrientation: 'upright',
    padding: '8px 4px' // 可选：根据标题栏尺寸调整内边距适配视觉效果
  }}
>
  Vertical Text
</Typography>

默认Accordion为上下展开结构，要实现从左向右展开的效果，还需要给组件根节点、摘要栏、内容区补充布局样式：

import { Accordion, AccordionSummary, AccordionDetails, Typography } from '@mui/material';

export default function HorizontalAccordion() {
  return (
    <Accordion
      sx={{
        display: 'flex',
        flexDirection: 'row', // 子元素横向排布：竖排标题在左，展开内容在右
        height: 320, // 横向展开需给容器固定高度，避免布局塌陷
        width: 'fit-content'
      }}
    >
      <AccordionSummary
        sx={{
          writingMode: 'vertical-lr',
          textOrientation: 'upright',
          minWidth: 48,
          justifyContent: 'center'
        }}
      >
        <Typography>垂直排列标题</Typography>
      </AccordionSummary>
      <AccordionDetails
        sx={{
          maxWidth: 280, // 控制展开后内容区的最大宽度
          padding: 2
        }}
      >
        {/* 这里放置展开后展示的任意内容 */}
        <Typography>展开后的内容区域</Typography>
      </AccordionDetails>
    </Accordion>
  )
}

• 不要误用writing-mode: vertical-rl，该取值会让块级元素沿从右到左的方向堆叠，和左展开的需求完全相反
• text-orientation: upright会让所有字符（包括英文、数字、中文）都保持正立竖排，如果需要英文/数字沿文本流方向侧转，可以将该值改为mixed
• 现代浏览器（Chrome 48+、Firefox 41+、Safari 10.1+）均已支持上述标准CSS属性，无需额外引入polyfill，如需兼容极老旧浏览器可补充对应厂商前缀。

内容的提问来源于stack exchange，提问作者rct