css 使用MUI在屏幕底部显示垂直固定框

olhwl3o2 于 2023-02-01 发布在其他

关注(0)|答案(1)|浏览(153)

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

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/有他们的“与我们聊天，我们在线”只是我希望它在右边。

css

来源：https://stackoverflow.com/questions/75286792/vertical-fixed-box-at-bottom-of-screen-using-mui

1条答案

按热度按时间

yiytaume1#

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

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

.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>

赞(0）回复(0）举报 2023-02-01

我来回答

css 使用MUI在屏幕底部显示垂直固定框

1条答案

相关问题

热门标签

最新问答