Less localidentname hash import name another file - reactjs

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;
}
}