Блог

./index.tsx

 import React from 'react';
import Child from '../Child/index';
import style from './index.scss';

const Parent = () => {
    return (
        <div className={style.parent}>
            <Child/>
        </div>
    )
}

export default Parent;
  

./index.scss

 .parent {
    // styles...
}
  

./Дочерний/index.tsx

 import React from 'react';
import style from './index.scss';

const Child = () => {
    return <div className={style.child}></div>;
}

export default Child;
  

./Дочерний/index.scss

 .child {
    // styles...
}
  

и я хочу использовать .parent:hover .child { //...style } в scss-файлах, таких как

 import '../index.scss';

.parent {
    amp;:hover {
        .child {
            // ...style
        }
    }
}

.child {
    // styles...
}
  

Есть ли какое-либо решение этой проблемы? Я ищу информацию о связи (например, проблему), но я ее еще не нашел.