Quero fazer minha página em tons mais escuros, minha estrutura de pasta é:
index.js
ReactDOM.render(
<Provider store={Store}>
<PersistGate loading={null} persistor={persistor}>
<App baseUrl={baseUrl} />
</PersistGate>
</Provider>,
document.getElementById('root'));
App.js
function App(props) {
return (
<div className="App">
<Root
isAuth={props.isAuth}
baseUrl={props.baseUrl}
/>
</div>
);
}
App.css
.App {
background-color: black; //Só para testar o funcionamento
text-align: center;
}
/* Chrome, Safari, Edge, Opera */
input::-webkit-outer-spin-button,
input::-webkit-inner-spin-button {
-webkit-appearance: none;
margin: 0;
}
/* Firefox */
input[type=number] {
-moz-appearance: textfield;
}
Root.js
class Root extends Component {
constructor(props) {
super(props);
}
render() {
return (
<div>
<Router basename={this.props.baseUrl}>
{
this.props.isAuth ?
<Navbar
logo={ logo }
background="#404040"
hoverBackground="#ddd"
linkColor="#777"
/>
: ''
}
<Switch>
{
this.props.isAuth ?
<React.Fragment>
<Route path="/Home" component={Home} />
<Route path="/Treinos" component={Treinos} />
<Route path="/Lives" component={Lives} />
<Route path="/Video_Aulas" component={VideoAulas} />
<Route path="/">
<Redirect to="/Home" />
</Route>
</React.Fragment>
:
<React.Fragment>
<Route path="/">
<Redirect to="/Login" />
</Route>
<Route path="/Login" component={Login} />
</React.Fragment>
}
</Switch>
</Router>
</div>
);
}
}
Mas a página fica assim, eu gostaria que cobrisse toda a página, não só aquele pedaço.
Tentei colocar o background-color
no css do index.js
mas nada aconteceu.
O que devo fazer para mudar todo o background-color da aplicação??
.App
simplesmente não ocupa a página inteira. Coloca um cssheight: 100vh
no css dele