Почему мой нижний подкомпонент отображается в верхней части страницы?

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; к основанию.