已解決:使用靜態樣式反應路由器

在 React Router 中使用靜態樣式的主要問題是很難跟踪不同的路由及其關聯的樣式。 使用靜態樣式時,每個路由都需要有自己的一組 CSS 規則,這很快就會變得笨拙且難以維護。 此外,如果在多個路由中使用一種樣式,則需要在所有路由中復制它,這使得代碼很難保持 DRY(不要重複自己)。

import React from 'react';
import { BrowserRouter as Router, Route, Link } from 'react-router-dom';
import styled from 'styled-components';
 
const StyledLink = styled(Link)`
  color: palevioletred;
  font-weight: bold;

  &:hover {
    color: white;
    text-decoration: none;  
  }  
`;

 const App = () => (   <Router>     <div>       <ul>         <li><StyledLink to="/">Home</StyledLink></li>         <li><StyledLink to="/about">About</StyledLink></li>       </ul>       <hr />       <Route exact path="/" component={Home} />       <Route path="/about" component={About} />     </div>   </Router>) ;

 const Home = () => (   <div>     <h2>Home</h2>   </div>) ;

 const About = () => (   <div>     <h2>About</h2>   </div>) ;

 export default App;

1.第一行導入React庫。
2、第二行從react-router-dom庫中導入BrowserRouter、Route、Link組件。
3. 第三行從styled-components 庫中導入樣式組件。
4. 第四行使用從 react-router-dom 導入的 Link 組件創建了一個 StyledLink 組件,並將其樣式設置為 color: palevioletred 和 font-weight: bold,以及將其顏色更改為白色並刪除所有文本的懸停效果懸停時的裝飾。
5. 第五行創建一個 App 組件,該組件呈現一個 Router 組件,其中包含兩個 Route 組件(一個用於 Home,一個用於 About)。 它還使用在上面的第 4 行中創建的 StyledLink 組件呈現兩個鏈接(Home 和 About)的無序列表,這兩個鏈接由 hr 標籤分隔以用於樣式目的。
6. 第 8 – 11 行創建了兩個名為 Home 和 About 的功能組件,當它們上面的第 2 行中各自的 Route 組件調用它們時,它們會在其中呈現帶有各自名稱的 h5 標籤(Home 呈現“Home”,而 About 呈現“About” ).
7. 最後,第 12 行導出 App 組件,以便在需要時可以在我們的應用程序的其他地方使用

靜態樣式

React Router 中的靜態樣式是應用於組件並保持不變的樣式,無論組件的狀態或道具有任何變化。 這與動態樣式形成對比,動態樣式會根據組件的狀態或道具而改變。 靜態樣式可用於在整個應用程序中創建一致的外觀,並為開發人員提供一種快速設置組件樣式的簡便方法,而無需在每次發生更改時手動調整它們。

樣式組件包

Styled-components 是 React Router 的一個流行包,它允許開發人員在他們的 React 應用程序中創建和管理組件級樣式。 它提供了一種簡單的方法來編寫作用域為單個組件的 CSS 代碼,使其更易於維護和調試。 Styled-components 還可以更輕鬆地跨多個組件共享樣式,並提供對主題的支持。 此外,styled-components 可以與 React Router 的 Link 組件一起使用,允許開發人員在他們的應用程序中設置鏈接樣式。

如何使用靜態樣式

通過使用內聯樣式屬性,可以在 React Router 中使用靜態樣式。 此屬性允許您將樣式直接應用於元素,而無需單獨的樣式表。 要在 React Router 中使用靜態樣式,您需要創建一個樣式對象,然後將其作為參數傳遞給組件的樣式屬性。 例如:

常量我的風格= {
背景顏色:'#f2f2f2',
fontSize: '20px',
顏色:'#000'
};

相關文章:

發表評論