how to use deep selector in less imported externally to tsx/jsx

Question

The deep selector in vue3 has been changed into :deep(xxx), but it doesn't work when I use it in .less imported externally to .tsx.

BTW, Although Vue3 is no longer use /deep/ or >>>, I still tried and didn't work too

.register_form {
    &__base_info {
      display: flex;
      flex-direction: row;
      justify-content: space-between;
      background-color: palegoldenrod;
      &__input_container {
        padding: 1rem;
        border: 1px solid green;
        border-radius: 5px;
        &__label {
          font-weight: bolder;
        }
        :deep(input) {
          border: none;
          background-color: yellow;
        }
      }
    }
  }