Javascript 为什么我的底部子组件显示在页面顶部？

我创建了一个环境来显示问题

基本上，问题是当我单击主菜单中的选项1时，会出现一个新组件，其中名为BottomControls.js的底部子组件显示在页面顶部，而不是页面底部

此外，卡片内容为白色，而不是背景色：styles.js中定义的“rgb225、0、80”

在BottomControls.js中，样式的应用似乎不正确。我将样式作为参数从父组件Main.js传递到BottomControls.js

---

有人知道我做错了什么吗？

关于你如何使用自己的风格，有两个主要问题：

您没有从./layout/single/styles.js导出任何内容 您没有使用withStyles将JS对象转换为可以使用的CSS类 以下是修复这些主要问题的代码沙盒：

对Main.js的更改：

更改了导出默认类扩展组件 对主扩展组件进行分类

将mystyles={styles}的案例更改为mystyles={this.props.classes}类prop由样式注入

---

然后在styles.js中我添加了导出默认样式；到底部。

酷！非常感谢你！

// added
import { withStyles } from "@material-ui/core/styles";

// added to end of Main.js
const StyledMain = withStyles(styles)(Main);
export default StyledMain;