I am currently developing a project using React (along with TypeScript) and the Material-UI library.
One of my requirements is to implement an animated submit button, while replacing the default one provided by the library. After some research, I came across this button on this website, which I successfully integrated into my React application by placing the CSS file in a "styles" folder and importing it into my Button's .tsx file. I converted the HTML code to JSX and now my render method looks like this:
return(
<button className={`submit-button ${btnState}`} onClick={handleClickOpen}>
<span className="pre-state-msg">Submit</span>
<span className="current-state-msg hide">Sending...</span>
<span className="done-state-msg hide">Done!</span>
</button>
);
Although the button functions correctly, the issue arises when I import the CSS file as it disrupts other components within the application (particularly affecting the Container component). I suspect this may be related to how Material-UI operates, but I am unsure of how to resolve this.
I understand that Material-UI recommends utilizing CSS-in-JS methodologies such as useStyles hook or withStyles. However, I am uncertain how to adapt the existing CSS file for seamless integration. Additionally, I am unsure if these solutions fully support all CSS features such as element>element selectors or classList.add.
In order to address this concern, is there a way to use the CSS file without causing conflicts? According to this documentation, it should be feasible, though my attempts have been unsuccessful so far. Alternatively, if incorporating pure CSS proves problematic, could the code be converted to CSS-in-JS format allowing for dynamic class manipulation?
Thank you in advance to those taking the time to review and assist with this question.