由于某些原因，React 组件不使用指定样式

Question

我正在创建一个使用其他一些组件的 React 组件。但是当我在 parent 组件中为 children 指定样式时，它们不使用指定的样式。但是，如果我将 children 包裹在 div 块中，它们就会。

这是我的代码：

index.css:

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

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

index.js、parent 组件代码。没用！

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

但是如果我用 div 包装我的 Menu 组件，一切都很好！

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

如果我直接在 child 组件 (Menu) 中应用样式，它也可以正常工作！

有什么问题，我该如何解决？

Answer 1

你把className传递给Menu，它是一个propetry，所以你需要在Menu组件中得到className属性和将它传递给元素，在这种情况下，我想你想为根节点

设置 className

// Only for example
const styles = {
  playlistsMenu: 'playlistsMenu',
  elementsMenu: 'elementsMenu'
};
  

class Menu extends React.Component {
  render() {
    return <div className={ this.props.className }>Menu</div>
  }
}

class App extends React.Component {
  render() {
    return <div>
      <Menu className={styles.playlistsMenu} />
      <Menu className={styles.elementsMenu} />
    </div>
  }
}

ReactDOM.render(<App />, document.getElementById('root'));

.playlistsMenu {
  color: red;
}

.elementsMenu {
  color: blue;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.1.0/react.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.1.0/react-dom.min.js"></script>
<div id="root"></div>

Answer 2

您正在将 classname 应用到您的菜单组件，因此它被视为道具而不是 class 属性。

您可以在菜单组件中应用 classname 或像您一样将 class 作为道具传递并再次在菜单组件中使用它。

由于某些原因，React 组件不使用指定样式

React components do not use specified styles for some reasons

html

javascript

css

reactjs

react-jsx