I'm creating a React component which uses some other components. But when I specify styles in the parent component for children, they do not use specified styles. But if I wrap children in div blocks, they do.

Here's my code:

index.css:

```
.playlistsMenu {
    position: absolute;
    left: 0;
}

.elementsMenu {
    position: absolute;
    right: 0;
}

```

index.js, parent component code. It not works!

```
render() {
    return (
        <div>
            <Menu className={styles.playlistsMenu}/>
            <Menu className={styles.elementsMenu}/>
        </div>
    );
}

```

But if I wrap my `Menu` components with `div`, everything is OK!

```
render() {
    return (
        <div>
            <div className={styles.playlistsMenu}>
                <Menu/>
            </div>
            <div className={styles.elementsMenu}>
                <Menu/>
            </div>
        </div>
    );
}

```

If I apply styles directly in child component (`Menu`), it also works fine!

What's the problem, and how do I solve it?