Less localidentname hash import name another file

Question

In webpack, css-loader I use localIdentName hash:base64:10 to "hide" real class names.

I have also some global components to put inside DOM structure page.

But, sometimes I need change style component form parent. When I use explicit class names (local), styles is working, but after render with hash, "duplicates" class name has diffrent hash and not overrite styles.

I mean about .window .paper - I want to overite .paper form a parent, but I haven't idea how can I get rendered hash name from file.

structure:

|-main.js
|-style.less
|-paper
    |-index.js
    |-style.less

main.js

import React from 'react';
import s from "./style.less";
import Paper from './paper/index.js';
export class Main extends React.Component {
    render() {
        return (
            <div className={s.window}>
                <Paper>example text</Paper>
            </div>
        )
    }
}

style.less

@import 'paper/style.less';
.window {
  background-color: rgba(0, 0, 0, 0.6);
  backdrop-filter: blur(10px);
  width: 100%;
  height: 100%;

  .paper { //<-----
    background-color: yellow;
  }
}

paper/index.js:

import React from 'react';
import s from "./paper/style.less";
export class Paper extends React.Component {
    render() {
        const { children } = this.props;
        return (
            <div className={s.paper}>
                <div className={s.content} ref={...}>{children}</div>
            </div>
        )
    }
}

paper/style.less:

.paper { //<-----
  display: block;
  background-color: white;
  border: 1px solid black;

  .content {
    margin: 20px;
  }
}