React项目中如何获取并修改导致文本溢出的元素属性？

你的DialogBox组件中，ReactQuill编辑器出现文本溢出白色输入框的问题，经元素检查确认是编辑器内部容器的默认样式导致。以下是最佳修改方案：

组件代码回顾 #

import * as React from "react";
import { createTheme, ThemeProvider } from '@mui/material/styles'
import { Box } from '@mui/system';
import { InputBase, TextField, Typography } from "@mui/material";
import ReactQuill from 'react-quill';
import { NoEncryption } from "@mui/icons-material";

type Props = {
    issueId: string
}

export default function DialogBox({ issueId }: Props) {
    const myTheme = createTheme({
        // 自定义MUI主题配置
    })

    const [newMsg, setNewMsg] = React.useState("");
    const [startNewMsg, setStartNewMsg] = React.useState(false)

    const handleNewMsgInput = (event: React.ChangeEvent<HTMLInputElement | HTMLTextAreaElement>) => {
    }

    const handleKeyPress = (event: React.KeyboardEvent<HTMLDivElement>) => {
        if (event.key === "Escape") {
            setNewMsg((prev) => "");
        }
    }

    return (
        <Box flexDirection="column" sx={{ display: "flex", alignItems: "center", backgroundColor: "lightblue", height: "100%", gap: "2rem" }} onKeyPress={handleKeyPress}>
            <Typography
                sx={{
                    width: "fit-content",
                    height: "fit-content",
                    fontFamily: "Amatic SC",
                    background: "lightblue",
                    fontSize: "3rem"
                }}>
                Message board
            </Typography>
            {startNewMsg ?
                <Box sx={{ width: "fit-content", height: "fit-content" }}>
                    <ReactQuill style={{ backgroundColor: "white", height: "10rem", maxWidth: "30rem", maxHeight: "10rem" }} theme="snow" />
                </Box>
                :
                <TextField 
                    id="filled-basic" 
                    label="write new message" 
                    sx={{ "& fieldset": { border: 'none' }, backgroundColor: "white", borderRadius: "5px" }} 
                    variant="filled" 
                    fullWidth={true} 
                    onClick={() => setStartNewMsg(prev => true)} 
                    onChange={handleNewMsgInput} 
                />
            }
        </Box>
    )
}

问题根源 #

问题出在ReactQuill生成的.ql-container元素上，它的默认min-width设置导致容器宽度超出外层Box范围，进而引发文本溢出。

最佳修改方式：用MUI sx嵌套选择器覆盖内部样式 #

直接修改ReactQuill所在外层Box的sx属性，通过嵌套选择器精准覆盖编辑器内部容器的样式：

{startNewMsg ?
    <Box sx={{ 
        width: "fit-content", 
        height: "fit-content",
        // 覆盖ReactQuill内部容器的默认宽度设置
        '& .ql-container': {
            width: '100%',
            minWidth: 'unset',
            boxSizing: 'border-box',
        },
        // 确保编辑器内容盒模型统一，避免padding导致溢出
        '& .ql-editor': {
            boxSizing: 'border-box',
        }
    }}>
        <ReactQuill 
            style={{ backgroundColor: "white", height: "10rem", maxWidth: "30rem", maxHeight: "10rem" }} 
            theme="snow" 
        />
    </Box>
    :
    {/* 原TextField部分保持不变 */}
    <TextField 
        id="filled-basic" 
        label="write new message" 
        sx={{ "& fieldset": { border: 'none' }, backgroundColor: "white", borderRadius: "5px" }} 
        variant="filled" 
        fullWidth={true} 
        onClick={() => setStartNewMsg(prev => true)} 
        onChange={handleNewMsgInput} 
    />
}

方案优势 #

• 无需额外引入CSS文件，样式内聚在组件中，维护便捷
• 利用MUI的sx嵌套选择器，仅作用于当前组件内的ReactQuill实例，避免全局样式污染
• 精准修正问题根源，同时通过boxSizing确保盒模型一致性，防止后续布局问题

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