MentionsTextField does not show background for mentions

[faiverson]

I have started a clean version following this steps: npm create vite@latest demo-mui-mentions

And then I installed the package: npm i --save react-mentions

First, I had a problem with the library tslib. Once I installed the problem was solved (I think worth to mention this)

Second, I copied the basic example and the library is working, however the background inside the input is not working.

I found out the problem is related to:

:root {
  font-family: Inter, system-ui, Avenir, Helvetica, Arial, sans-serif;
  line-height: 1.5;
  font-weight: 400;

  color-scheme: light dark;
  color: rgba(255, 255, 255, 0.87);
  background-color: white;

  font-synthesis: none;
  text-rendering: optimizeLegibility;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

For some reason background-color: white; is causing the issue and I couldn't find a solution to make it work without remove that pretty standard css reset.

I've created the example on this repo: https://github.com/faiverson/mui-mentions for a quick clone access

[faiverson]

One thing is related and even more important, after some testing, I found out if you use a MUI Card component, you get the same issue:

<Card sx={{ maxWidth: 345 }}>
      <CardContent>
        <MentionsTextField
                    variant='outlined'
                    label='Outlined'
                    fullWidth
                    defaultValue={defaultValue}
                    dataSources={[
                        {
                            data: stormlight,
                        },
                    ]}
                />
      </CardContent>
</Card>