css React Scroll按钮未发送更改

vs91vp4v  于 2023-02-01  发布在  React
关注(0)|答案(1)|浏览(94)

我从来没有做过很多的设计,当谈到滚动在React,但决定尝试今天。从我的理解,这样做的方式是使用 Package 器和使用库的需要是不需要的。我不明白为什么我的滚动按钮没有发生什么?

import React, { useState } from 'react'
import ArrowCircleRightIcon from '@mui/icons-material/ArrowCircleRight';
const SendMessageUser = () => {
    const styles = {
        main: {
            height: "100%",
            position: "relative"
        },
        wrapper: {
            height: "100%",
            position: "relative",
            "::-webkit-scrollbar": {
                width: "20px"
            },
            "::-webkit-scrollbar-track": {
                backgroundColor: "transparent"
            },
            "::-webkit-scrollbar-thumb": {
                backgroundColor: "#d6dee1",
                borderRadius: "20px",
                border: "6px solid transparent",
                backgroundClip: "content-box"
            },
            "::-webkit-scrollbar-thumb:hover": {
                backgroundColor: "#a8bbbf"
            }
        },
        textArea: {
            height: "100%", overflowY: "auto", width: "100%", backgroundColor: "#fff", resize: "none", border: "none", outline: "none", padding: "10px 25px 10px 10px", fontSize: "15px",
        }
    };
    const [message, setMessage] = useState("");
    const handleChange = (event) => {
        setMessage(event.target.value);
    };
    const sendMessage = (event) => {
        event.preventDefault();
    }
    return (
        <form className="send-message" onSubmit={(event) => sendMessage(event)} style={styles.main}>
            <div style={styles.wrapper}>
                <textarea spellcheck="false" data-gramm="false" data-gramm_editor="false" data-enable-grammarly="false" style={styles.textArea}>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed hendrerit, ipsum in hendrerit laoreet, ligula ipsum commodo nisl, eu commodo est nulla quis dolor.</textarea>
            </div>
            <ArrowCircleRightIcon color="primary" sx={{
                position: "absolute",
                top: 0,
                right: 0,
                transform: "rotate(-90deg)",
            }} />
        </form >
    )
}

export default SendMessageUser
9udxz4iz

9udxz4iz1#

在我当前的react项目中,我也有一个定制的滚动条,就像你的一样,但是我在react项目的全局CSS中改变了它的样式。下面是代码。你可以在整个网页上尝试这个,然后改变它的设计。我还添加了根和颜色变量:

:root {
  --main-red: #e50914;
  --main-red-hover: #89040a;
  --bg: #141414;
}

::-webkit-scrollbar {
  display: block;
  width: 7px;
  border-radius: 20px;
}

::-webkit-scrollbar-track {
  background: transparent;
}
    
::-webkit-scrollbar-thumb {
  background-color: var(--main-red);
  border-radius: 20px;
  border-right: none;
  border-left: none;
}

::-webkit-scrollbar-thumb:hover {
  background-color: var(--main-red-hover);
}

::-webkit-scrollbar-track-piece:end {
  background: transparent;
  margin-bottom: 5px; 
}

::-webkit-scrollbar-track-piece:start {
  background: transparent;
  margin-top: 5px;
}

::selection {
  background: var(--main-red);
  color: var(--bg);
}

希望这是有帮助的。

相关问题