I have a Typography rows with text. If the text is long and doesn’t fit into 2 rows there are ellipsis at the end. Now I would like to show all the text when user clicks on the element. I am trying to achieve the change of the css attributes onClick (not sure if I can do it like that in React). So far I have the following:

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 there is a change in css class onClick (in developer console) however class attributes won’t change. Classes itself (css-mzggb7 and css-yfc04t) are probably generated during build because I don’t see them in the project structure. So changes are not read from my style.css file. Can you please tell me if I am on right track. Or if I should choose different approach? Thank you