css 主要内容 Package 器最佳做法

eanckbw9 于 2023-02-01 发布在其他

关注(0)|答案(1)|浏览(122)

我想创建一个主内容 Package 器，这样我就不用给每个组件单独添加类了，我使用了tailwindCSS。它只有几个类，主要是给予内容一个边距，一个最大宽度，并保持居中。
我在路线周围放了几个div，但我不知道这是否是一个好的练习。
这是我的应用程序.jsx

import { BrowserRouter as Router, Route, Routes } from 'react-router-dom';

// pages
import Navbar from './Navbar';
import Home from './Home';
import About from './About';
import Contact from './Contact';

function App() {

  return (
    <Router>
      <div className='font-mono'>
        <Navbar />
        <div className='flex justify-center'>
          <div className='m-10 lg:max-w-4xl'>
          <Routes>
            <Route path='/' element={<Home />}/>
            <Route path='/about' element={<About />} />
            <Route path='/contact' element={<Contact />} />
          </Routes>
          </div>
        </div>
      </div>
    </Router>
  );
}

export default App;

css

来源：https://stackoverflow.com/questions/75289202/main-content-wrapper-best-practices

1条答案

按热度按时间

hxzsmxv21#

是的，我想这很常见，我通常把它抽象成一个单独的组件。
/components/container/Container.js

export default function Container({ children }) {
  return (
    <div className='flex justify-center'>
      <div className='m-10 lg:max-w-4xl'>{children}</div>
    </div>
  );
}

然后你可以导入它并在任何你喜欢的地方使用它。在 Package 你的路线的情况下，我想你不会在其他地方重用它，但它仍然可以去除一些视觉噪音，并保持事情有点组织。
/App.js

import Container from './components/container/Container';

function App() {
  return (
    <Container>
      <Router>
        <Routes>
          <Route path='/' element={<Home />}/>
          <Route path='/about' element={<About />} />
          <Route path='/contact' element={<Contact />} />
        </Routes>
      </Router>
    </Container>
  );
}

赞(0）回复(0）举报 2023-02-01

我来回答

css 主要内容 Package 器最佳做法

1条答案

相关问题

热门标签

最新问答