為什么我的底部子組件顯示在頁面頂部？

Question

我創建了一個沙箱環境來顯示問題。

基本上，問題是當我在主菜單中單擊“選項1”時，出現一個新組件，其中一個底部子組件（稱為BottomControls.js ）顯示在頁面頂部而不是頁面底部。

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

似乎在BottomControls.js錯誤地應用了BottomControls.js 。 我通過樣式作為參數傳遞給BottomControls.js從父組件Main.js 。

有人知道我在做什么錯嗎？

Answer 1

如何使用樣式存在兩個主要問題：

• 您沒有從./layout/single/styles.js導出任何./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={styles}更改為mystyles={this.props.classes} （prop的classes由withStyles注入）。

然后在styles.js添加了export default styles; 至底部。