Question

我正在创建一个使用其他组件的React组件。但是当我在子组件的父组件中指定样式时，它们不使用指定的样式。但是如果我把孩子包裹在div块中，他们就会这样做。

这是我的代码：

index.css：

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

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

index.js，父组件代码。它不起作用！

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

但是，如果我用Menu包裹我的div组件，一切正常！

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

如果我直接在子组件（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应用于您的菜单组件，因此它被视为道具，而不是类属性。

您可以在菜单组件中应用类名，或者将类作为支柱传递，并再次在菜单组件中使用。

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

2 个答案: