estou aprendendo react e tentei passar uma estilização por props, mas não vejo o resultado no navegador. Gostaria de deixar o <p>footer<p/>
mais para baixo, então dei uma customClass, porém não funciona. Alguém tem ideia do que pode ser?
App.js
import { Nav } from "./Components/Nav";
import {BrowserRouter as Router, Route,Routes} from 'react-router-dom'
import { Home } from './Components/pages/Home';
import { Company } from './Components/pages/Company';
import { NewProject } from './Components/pages/NewProject';
import { Contact } from "./Components/pages/Contact";
import { Container } from "./Components/layout/Container";
function App() {
return (
<Router>
<Nav/>
<Container customClass="minheight" >
<Routes>
<Route exact path="/" element={<Home/>}/>
<Route exact path="/company" element={<Company/>}/>
<Route exact path="/contact" element={<Contact/>}/>
<Route exact path="/newproject" element={<NewProject/>} />
</Routes>
</Container>
<footer>Footer</footer>
</Router>
);
}
export default App;
Container.js
import styles from './Container.module.css'
export function Container (props){
return(
<div className={`${styles.container}${styles[props.customClass]}`}>
{props.children}
</div>
)
}
Container.module.css
.Container{
width: 1200px;
display: flex;
justify-content: space-between;
margin:0 auto;
flex-wrap: wrap;
}
/*
Este minheight deveria fazer com que o footer ficasse bem para baixo
*/
.minheight{
height: 75%;
}
${styles.container}${styles[props.customClass]}
está muito junto não deveria ter um espaço:${styles.container} ${styles[props.customClass]}