MUI Accordion Changes Colour with an Input field-CodePudding

I am creating an Accordion component when a user inputs the field, it will change the text in the Accordion summary. Pretty simple. This also works already.

My code is something like this:

            <Accordion>
            <AccordionSummary
                expandIcon={<ExpandMoreIcon />}
                aria-controls="panel1a-content"
                id="panel1a-header"
            >
                    <UsersInput type="text"  name="experience" placeholder="A question you face often while hiring"
                    onChange={handleInputField} 
                        />
            </AccordionSummary>
            <AccordionDetails>
                <div>
                    <PlainTextEditorExample/>
                </div>

            </AccordionDetails>
            </Accordion>

And this is functioning, however when you click on the input and it is active, the MUI accordion goes gray automatically by colour.

This is before the individual clicks on the input: https://gyazo.com/b76d9b0aaa469292658b29977e5bec12

And this is after: https://gyazo.com/ce8f55e8f830d2923b78e0e31954d7c3

How would you fix this?

CodePudding user response：

Mui has a class that ist called MuiAccordionSummary-root. Somehow when you fous the text field, the whole class style will get overwritten and thats why the accordion summary becomes gray. To fix that simply add this to your css:

.MuiAccordionSummary-root{
  background-color: white !important
}

And i would suggest you use an TextField from MUI instead of UsersInput