0

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%;
}
2
  • 4
    acho eu sem testar: ${styles.container}${styles[props.customClass]} está muito junto não deveria ter um espaço: ${styles.container} ${styles[props.customClass]}
    – novic
    Commented 9/03/2023 às 19:04
  • 1
    Perfeito cara, Muito obrigado.
    – Zheoantan
    Commented 9/03/2023 às 19:16

0

Você deve fazer log-in para responder a esta pergunta.

Pesquise outras perguntas com a tag .