React风格的Componte＆＃x2B; Mui

Question

我正在使用样式组件的GlobalStyle（CreateGlobalStyle）及其正常工作，除非

基本上是为了自定义MUI组件，否则我（从HTML渲染中）

<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">

class teste1和teste2 coldect and corret corret corret em em style and corret and corted contection the Mui a the Mui Compents）html html）元素但没有渲染。背景颜色不会在网站中呈现。我在DIV中进行了测试，但也没有工作。那是什么时候渲染此组件的东西？大概在创建样式之前？我怎么能做得更好？

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