CODEWITHSUNDEEP
javascriptreactjsmaterial-ui
ScalaBoy
ScalaBoy

Reputation: 3392

Why my bottom sub-component is shown on top of a page?

I created a sandbox environment to show an issue.

Basically the problem is when I click "Option 1" in a main menu, a new component appears in which a bottom sub-component (called BottomControls.js) is showed in the top of a page instead of a bottom of a page.

Also the CardContent is white instead of backgroundColor: 'rgb(225, 0, 80)' as defined in styles.js.

It seems like styles are applied incorrectly in BottomControls.js. I passed styles as a parameter to BottomControls.js from a parent component Main.js.

Does anybody know what am I doing wrong?

Upvotes: 0

Views: 38

Answers (1)

Ryan Cogswell
Ryan Cogswell

Reputation: 81066

There were two main issues with how you were trying to use your styles:

  • You weren't exporting anything from ./layout/single/styles.js
  • You weren't using withStyles to convert the JS object into CSS classes that you can use

Here's a CodeSandbox that fixes those main issues:

Edit 1z9qk10rj4

Changes to Main.js:

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

Changed export default class extends Component to class Main extends Component

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

Changed cases of mystyles={styles} to mystyles={this.props.classes} (the classes prop is injected by withStyles).

Then in styles.js I added export default styles; to the bottom.

Upvotes: 1

Related Questions