使用 MUI 在屏幕底部的垂直固定框

Question

到目前为止，我已经尝试过这个：

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)", backgroundColor: "blue" }}>
        <Typography sx={{ color: "white" }}>CHAT WITH US!</Typography>
      </Box>
    </MainStyle>
  );
}

这样做的问题是一半的框超出了屏幕并且没有一直到右边。

我的目标是将它一直放在右上角，但也像https://proxy-seller.com/这样显示整个框，让他们“与我们聊天，我们在线”只是我想要的在右侧。

Answer 1

writing-mode: vertical-rl; 您可以使用提到的 css 属性。

• writing-mode: vertical-rl简单html示例，您可以从中了解更多 信息。

   .main { position: relative; }.text { writing-mode: vertical-rl; border: 2px solid #000; position: absolute; top: 15px; right: 15px; height: 120px; }

   <main class="main"> <h1 class="text">Test text</h1> </main>