Я создаю небольшое приложение, которое представляет собой макет https://emergencycompliment.com с использованием функциональных компонентов ReactJS (на самом деле пока только 1). Я реализовал функцию, которая вызывается при нажатии кнопки OnClick и должна рандомизировать комплимент для отображения и изменения цвета фона.
Это то, что я создал (React и CSS)
import React, {useState}from "react"
import "./App.css"
function App() {
const [compliment, setCompliment] = useState("Hello")
const [color, setColor] = useState("lightblue")
const compliments = [
"You're pretty",
"You're smart",
"You're test1",
"You're test2",
"You're nice",
"You're test3"
]
function giveCompliment() {
let item = compliments[Math.floor(Math.random() * compliments.length)];
setCompliment(item)
setColor("green")
}
return (
<div className="App">
<header className="App-header" style={{backgroundColor: {color}}}>
<div className="centered">
<p>
{compliment}
</p>
<button className="button" onClick={giveCompliment}>Thanks!</button> <button className="button">MEH!</button>
</div>
</header>
</div>
);
}
export default App;
.App {
text-align: center;
}
.centered {
position: fixed;
top: 50%;
left: 50%;
}
.button {
background-color: Transparent;
background-repeat:no-repeat;
border: 5px solid #f5f5f5;
font-size: 20px;
color: whitesmoke;
width: 100%;
}
.App-logo {
height: 40vmin;
pointer-events: none;
}
@media (prefers-reduced-motion: no-preference) {
.App-logo {
animation: App-logo-spin infinite 20s linear;
}
}
.App-header {
background-color: #282c34;
min-height: 100vh;
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
font-size: calc(10px + 2vmin);
color: white;
}
.App-link {
color: #61dafb;
}
@keyframes App-logo-spin {
from {
transform: rotate(0deg);
}
to {
transform: rotate(360deg);
}
}
Я также безуспешно пытался использовать background-color = {color}. По какой-то причине мне еще предстоит найти, что приложение придерживается атрибута, определенного в CSS (либо в приложении, либо в заголовке приложения), в зависимости от моих тестов. Я попытался установить цвет как в приложении, так и в заголовке приложения, без разницы. Если я удалю этот атрибут цвета фона из CSS, страница станет белой, а цвет по-прежнему не изменится. Я даже пытался жестко запрограммировать значение цвета, но все равно не работает. Я также пробовал использовать шестнадцатеричные значения для цвета, но он все еще не работал.
Что-то мне здесь не хватает?