React Material UI Typography - 单击时显示隐藏文本的其余部分

Question

我有一个带有文本的排版行。如果文本很长并且无法容纳 2 行，则末尾会有省略号。现在我想在用户单击元素时显示所有文本。我试图实现 css 属性 onClick 的更改（不确定我是否可以像在 React 中那样做到）。到目前为止，我有以下内容：

main.tsx

import './style.css'

样式.css

Typography[m="2"] {
    overflow-x: hidden !important;
    overflow-y: hidden !important;
}
Typography[m="all"] {
    overflow-x: unset !important;
    overflow-y: auto !important;
}

/*[class="2"] {*/ 
/*overflow-x: hidden !important;*/
/*overflow-y: hidden !important;*/
/*}*/
/*[class="all"] {*/
/*overflow-x: unset !important;*/
/*overflow-y: auto !important;*/
/*}*/

表格.tsx

const [expanded, setExpanded] = useState(false);

const handleToggle = () => {
    setExpanded(!expanded);
};

<Typography onClick={handleToggle}
    sx={{
        display: '-webkit-box',
        overflow: 'hidden',
        WebkitBoxOrient: 'vertical',
        WebkitLineClamp: 2,
        fontSize: "smaller",
        }}
    className={expanded ? "all" : "2"}       //trying to change css attribute by className / m value
    m={expanded ? "all" : "2"}>
    <b>"comment":</b> {longText}
</Typography>

我可以看到 css class onClick （在开发人员控制台中）发生了变化，但是类属性不会改变。类本身（css-mzggb7 和 css-yfc04t）可能是在构建过程中生成的，因为我在项目结构中没有看到它们。因此，不会从我的 style.css 文件中读取更改。你能告诉我我是否走在正确的道路上吗？或者我是否应该选择不同的方法？谢谢你

Answer 1

尝试使用

const LongHiddenTextExpandOnClick = () => {

const [wrapText, setWrapText] = useState(true);
const text = "Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book.";

return (
    <Box width={"40vw"}>
        <Typography
            sx={
                wrapText &&
                {
                    overflow: "hidden",
                    textOverflow: "ellipsis",
                    display: "-webkit-box",
                    WebkitLineClamp: "2",
                    WebkitBoxOrient: "vertical",
                }
            }
            onClick={() => setWrapText(prev => !prev)}
        >
            {text}
        </Typography>
    </Box>
);

};

导出默认的LongHiddenTextExpandOnClick；