Hi guys! I’m tring to create the random quote machine. i wrote this code but there is a problem: the background color doesn’t change. I tried different solutions but in the end i didn’t solve the problem. Some one can hepls me? 
p.s.
Is the first time that i upload something on GitHub, i hope to didn’t commit some mistakes 
Sure, I was able to clone your git repo.
Which background color is not working? They seem to be working to me.
The color on the sides are the portion of you App container that is visible and the color is being applied to the buttons.
I get a syntax error when I do ‘npm run start’. Did you have to fix anything to get it to run?
Uncaught SyntaxError: Unexpected token '<' bundle.js
No, I did not. I assume you did an install.
Yep, I’ve got a million node_modules 
yes, they works. But i would like setting the backgroundColor of the page (the part that now is white outside the App).
Then you need to target the body, etc. Or you need to stretch that container out to fill the screen.
I tryed but without success
Because, correct me if it’s wrong, i can’t import a state from my App to sass file. And i tried to stretch that container but it doesn’t stretch 
Yeah, I gave it a quick try and wasn’t able to get it to work.
No, I don’t think you can get that variable into the Sass file. But you can use it as an inline style. There is a way to do it, but it may take some minor restructuring.
I’ll see if I can take a look tomorrow.
Did you find some solutions?
Sorry, busy at work, will try tomorrow.
Put a container for the background color and move the centering to it (remove flexbox from body). You can of course create a class for it but I just added the styles to the style object.
App.scss
body {
min-height: 100vh;
text-align: center;
font-size: calc(10px + 2vmin);
}
#root {
height: 100vh;
}
App.js
render() {
return (
<div
style={{
backgroundColor: this.state.colore,
height: '100%',
display: 'grid',
placeContent: 'center',
}}
>
<div className="container">
<Card
citazione={this.state.citazione}
autore={this.state.autore}
colore={this.state.colore}
onChange={this.handleChange}
/>
</div>
</div>
);
}
I’m sure there are a bunch of other ways of doing it. Another way is using custom properties. It does require you to interact with the DOM directly but I don’t think that is much of an issue in this case.
App.scss
body {
min-height: 100vh;
display: flex;
flex-direction: column;
text-align: center;
align-items: center;
justify-content: center;
font-size: calc(10px + 2vmin);
--bg-color: #11a3d0;
background-color: var(--bg-color) !important;
}
App.js
componentDidUpdate() {
document
.querySelector('body')
.style.setProperty('--bg-color', this.state.colore);
}
Note that Bootstrap will overwrite your styles (which is why I added the !important).
A thousand thanks! I understand my mistake
I didn’t use:
#root {
height: 100vh;
}
in app.scss!
This topic was automatically closed 182 days after the last reply. New replies are no longer allowed.