Material UI's CSSBaseline breaking react-mentions-CodePudding

I'm trying to figure out why CSSBaseline of Material UI is breaking the background color alignment of React-mentions and how to solve this (https://www.npmjs.com/package/react-mentions)

Take a look at the following setup: https://codesandbox.io/s/frosty-wildflower-21wqm

Currently I'm pretty much stuck and I really hope someone can help me to find the fix.

Please let me know if there are any questions.

Cheers

CodePudding user response：

Your problem here is the line-height property set by the MuiBaseline; To solve, simply reset it to 1, as:

* {
  line-height: 1;
}

Working solution: https://codesandbox.io/s/nifty-glitter-4j0c5?file=/src/styles.css