已解决：使用静态样式反应路由器

在 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'
};

相关文章：

发表评论