I am trying to create an Accordion that opens left-to-right. The Accordion title should thus have a text body that goes top-to-bottom, similar to what can be seen here.

This code does not work:

 <Typography sx={{textOrientation: 'upright', writingMode: 'vertical'}}>
     Vertical Text
 </Typography>

CodePudding user response：

vertical value for writingMode is not correct. You should use either vertical-lr or vertical-rl. Also upright value for textOrientation makes the direction of the sentences vertical (but it does not rotate the letters). Thus for having letters rotated 90° clockwise, sideways value is needed.

<Typography sx={{textOrientation: 'sideways', writingMode: 'vertical-lr'}}>
     Vertical Text
</Typography>