React Styled Componte + MUI

I am using GlobalStyle(createGlobalStyle) from Styled-Components and its working fine unless to customize MUI components

Basically, I have (from HTML render)

<style data-styled="active" data-styled-version="5.3.5">
    .teste1 :{background-color:red;border:1px solid red !import;}
    .teste2 :{background-color:blue;border:1px solid blue !import;}
</style>

<nav class="drawer">
    <div class="PrivateHiddenCss-root PrivateHiddenCss-xsDown css-1f8mm7w-PrivateHiddenCss-root">
        <div class="MuiDrawer-root MuiDrawer-docked css-7ik032-MuiDrawer-docked" id="Drawer_123">
            <div class="teste1 teste2">teste</div>
            <div class="MuiPaper-root MuiPaper-elevation MuiPaper-elevation0 teste1 teste2 MuiDrawer-paper MuiDrawer-paperAnchorLeft MuiDrawer-paperAnchorDockedLeft css-12i7wg6-MuiPaper-root-MuiDrawer-paper">

The class teste1 and teste2 was rendered corretly em STYLE and applied corretly to (indie athe MUI component) HTML element but not rendered. The background colors dont apear in site. I tested in a div and not worked too. Thats anything about when this component is rendered? Probably before the style was created? How I can do this better?

 <Drawer id="Drawer_123" variant='permanent' {...other}
      classes={{
        paper: 'teste1 teste2'
      }}
    >
      <div className="teste1 teste2">teste</div>
      <List id="List_Drawer_123" disablePadding>