I have a situation where I need to display text in Typography rows, but if the text is too long to fit into 2 rows, ellipsis are displayed at the end. However, I would like to show the full text when the user clicks on the element. I am attempting to change the CSS attributes onClick (not sure if this can be done in React). Here is what I have so far:
main.tsx
import './style.css'
style.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;*/
/*}*/
Form.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>
I can see that there is a change in the CSS class onClick (in developer console), however, the class attributes themselves won't change. The classes (css-mzggb7 and css-yfc04t) are probably generated during build because they are not in the project structure. So the changes are not being read from my style.css file. Can you please let me know if I am heading in the right direction or if I should try a different approach? Thank you.
Edit: My next attempt was as follows (unfortunately without success):
const [rowNumber, setRowNumber] = useState<string>("2")
const handleToggle = () => {
setExpanded(!expanded);
if(rowNumber == "2") {
setRowNumber("0");
} else {
setRowNumber("2");
}
};
<Typography onClick={handleToggle}
sx={{
display: '-webkit-box',
overflow: 'hidden',
WebkitBoxOrient: 'vertical',
WebkitLineClamp: '{rowNumber}',
fontSize: "smaller",
}}">
<b>"comment":</b> {longText}
</Typography>