'Css in JS' approach not styling the component correctly

1

Hi guys,

I’m working on this react based app https://stackblitz.com/edit/godutch-app. So I started implementing the ‘CSS in JS’ solution starting with the Header component but it doesn’t seem to style the Header.

I’m using the material UI styling solution and using the " Higher-order component API" to use the styling. Link here > https://material-ui.com/styles/basics/#higher-order-component-api

The Header component style is not rendering correctly on the screen. Can somebody share where am I going wrong. Any help would be appreciated.

Thanks a lot!!

2

You are applying the styles from styles.scss, not the object. Look at the button in the docs example to see how the class is applied.

You have:

<div className="header">
</div>

Should be:

<div className={classes.header}>
</div>

BTW, you have a px value instead of a color for backgroundColor.

3

Look at the header div in your dev tools inspector. There is something there that is causing the text in the header to not show up. It’s even crossed out and has a warning triangle next to it in my dev tools.