While creating a user profile on my app, I encountered an issue with button coloring. When I try to add color functionality to the button, it turns red instead of green and remains red even when the mouse is not hovering over it. My goal is to have the button start as green and only change to red when the mouse hovers over it...
Below is the code snippet in question:
import { useEffect, useState } from "react";
import userInformation from "../../services/userInformation";
// More code goes here...
Specifically, the problematic code segment is as follows:
{state.newPost.document ? <Button onMouseLeave={() => setDeleteDocument(!deleteDocument)} onMouseEnter={() => setDeleteDocument(!deleteDocument)} onClick={(e) => {
e.preventDefault();
dispatch(createPosts('', 'document'))
}} startIcon={deleteDocument ? <DeleteForeverTwoToneIcon /> : <CheckBoxTwoToneIcon />} variant='contained' color={deleteDocument ? "error" : "success"} style={{position: 'absolute', left: '92.5%', top: '53%', borderRadius: '16px'}}>1 File</Button> : <Button startIcon={contentError === 'document' ? <AttachFileTwoToneIcon style={{color: 'red'}}/> : <AttachFileTwoToneIcon />} variant="outlined" style={{position: 'absolute', left: '93%', top: '53%', background: 'rgba(255, 255, 255, 0.32)', border: '1px solid rgba(45, 135, 255, 0.3)', borderRadius: '16px', color: contentError === 'document' ? 'red' : '', borderColor: contentError === 'document' ? 'red' : ''}} disabled={loading} component='label'>File <input style={{pointerEvents: 'none'}} accept=".pdf" type='file' hidden onChange={(e) => {
setDeleteDocument(false)
dispatch(createPosts(e.target.files[0], 'document'))
}}/></Button>}