求助：使用MUI实现屏幕右侧底部垂直固定盒子的显示异常问题

问题根源是元素旋转时默认以中心为原点，导致旋转后部分超出屏幕，且定位未适配旋转后的尺寸。以下是修正方案：

方案一：调整父容器+旋转原点与位移 #

import "./styles.css";
import { Box, Typography } from "@mui/material";
import styled from "@emotion/styled";

export default function App() {
  const MainStyle = styled("div")(({ theme }) => ({
    position: "fixed",
    zIndex: 99999,
    right: 0,
    bottom: 0,
  }));

  return (
    <MainStyle>
      <Box 
        sx={{ 
          transform: "rotate(-90deg) translate(0, -100%)",
          transformOrigin: "bottom right",
          backgroundColor: "blue",
          padding: "8px 16px",
        }}
      >
        <Typography sx={{ color: "white" }}>CHAT WITH US!</Typography>
      </Box>
    </MainStyle>
  );
}

关键修改点：

• transformOrigin: "bottom right"：将旋转原点设为盒子右下角，避免旋转后位置偏移
• translate(0, -100%)：补偿旋转导致的向上偏移，确保盒子完全显示在屏幕内
• 添加padding优化文字与盒子边缘的间距

方案二：直接给Box设置固定定位（更简洁） #

import "./styles.css";
import { Box, Typography } from "@mui/material";

export default function App() {
  return (
    <Box 
      sx={{ 
        position: "fixed",
        zIndex: 99999,
        right: 0,
        bottom: 20, // 可自定义与屏幕底部的间距
        transform: "rotate(-90deg) translate(0, -100%)",
        transformOrigin: "bottom right",
        backgroundColor: "blue",
        padding: "8px 16px",
        cursor: "pointer"
      }}
    >
      <Typography sx={{ color: "white" }}>CHAT WITH US!</Typography>
    </Box>
  );
}

两种方案都能实现盒子完整显示在屏幕右下角、垂直排列的效果。

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