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

Question

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

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

CardContent也是白色的，而不是backgroundColor: 'rgb(225, 0, 80)'中定义的styles.js。

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

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

Answer 1

如何使用样式有两个主要问题：

• 您没有从./layout/single/styles.js导出任何内容
• 您没有使用withStyles将JS对象转换为可以使用的CSS类

以下是一个CodeSandbox，它可以解决以下主要问题：

更改为Main.js：

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

已更改export default class extends Component 到class Main extends Component

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

将mystyles={styles}的情况更改为mystyles={this.props.classes}（classes道具由withStyles注入）。

然后在styles.js中，我在底部添加了export default styles;。