Material UI MobileStepper background color change

Question

Hoping someone can assist. I am using the MobileStepper component, specifically:

https://mui.com/api/mobile-stepper/

and attempting to use a different background color for this stepper. Looking at the Dev Tools for this component, I found the following:

.MuiMobileStepper-root {
    display: flex;
    padding: 8px;
    background: #fafafa;
    align-items: center;
    flex-direction: row;
    justify-content: space-between;
}

I actually just want to change the background value to:

.MuiMobileStepper-root {
    background: #dadada;
}

Unsure how to change this within my React component.

Not sure if it's an overrides/root style change?

Answer 1

This worked for me

<MobileStepper sx={{ bgcolor: 'transparent' }}/>