vue3使用深度选择器修改样式问题

/deep/ .el-button.is-round {
    padding: 4px 20px;
    background-color: #109cf1;
}
/*改为如下书写方式即可 */
:deep(.el-button.is-round) {
    padding: 4px 20px;
    background-color: #109cf1;
}

/*如下修改只能改到第一个类名，修改不到第二个类名 */
:deep(.el-input__inner，
.el-button.is-round) {
    width: 440px;
    height: 60px;
    line-height: 20px;
    border-radius: 30px;
    border: 1px solid rgba(211, 211, 211, 100);
    font-size: 16px;
}
/*应改为 */
:deep(.el-input__inner),
:deep(.el-button.is-round) {
    width: 440px;
    height: 60px;
    line-height: 20px;
    border-radius: 30px;
    border: 1px solid rgba(211, 211, 211, 100);
    font-size: 16px;
}

<style scoped>
.class1 >>> .class2 { /* ... */ }
</style>

.class1[data-v-f3f3eg9] .class2 { /* ... */ }

//parent.vue
<template>
  <div class="wrapper">
    <p>parent</p>
    <ChildMessageComponent/>
  </div>
</template>
<script>
import ChildMessageComponent from "./components/child";
export default {
  name: "App",
  components: {
    ChildMessageComponent
  }
};
</script>
<style scoped>
.wrapper {
  background: blue;
}
</style>
//child.vue
<template>
  <div class="wrapper">
    <p>child</p>
  </div>
</template>
<script>
export default {
  name: "Hello, Scoped CSS",
};
</script>
<style scoped>
.wrapper {
  background: red;
}
</style>

// webpack.config.js
{
  module: {
    rules: [
      // ... other rules omitted
      {
        test: /\.css$/,
        use: [
          'vue-style-loader',
          {
            loader: 'css-loader',
            options: {
              // enable CSS Modules
              modules: true,
              // customize generated class names
              localIdentName: '[local]_[hash:base64:8]'
            }
          }
        ]
      }
    ]
  }
}

<style module>
.customStyle {
  background: blue;
}
</style>

<template>
  <div :class="$style.blue">
    Background color should be in blue
  </p>
</template>