Инкапсулируйте компонент NavLink и стилизуйте его с помощью Styled Component
Я пытаюсь создать меню с гиперссылками из компонента библиотеки react-rounter-domNavLink
и стилизуйте его с помощью стилизованного компонента
Я создал компонент с именем Link, который находится там, где NavLink, чтобы вы не повторяли одну и ту же строку кода несколько раз, а затем передали этот компонент стилизованному компоненту, чтобы он наследовал его свойства, чтобы вы могли применять к нему стили.
но стили не применяются к моему компоненту
НавЛинк
import { NavLink as NavLinkReactRouterDom } from "react-router-dom";
const Link = function ({ to, children, ...props }) {
return (
<>
<NavLinkReactRouterDom
{...props}
className = {({ isActive }) =>
// console.info(isActive)
isActive ? "is-active" : undefined
}
to = {to}
>
{children}
</NavLinkReactRouterDom>
</>
);
};
export default Link;
sidebarStyled.js (CSS)
import styled from "styled-components";
import Link from "./NavLink";
// NavLink
export const Prueba = styled(Link)`
color: white;
font-size: 50px;
text-decoration: none;
display: flex;
justify-content: flex-start;
align-items: stretch;
flex-direction: row;
&.is-active {
color: green;
}
`
Боковая панель
const Sidebar = function () {
return (
<SidebarContainer>
<LogoContainer>
<img src = {Logo} alt = "Logo" />
</LogoContainer>
<h1>Sidebe Here</h1>
<Divider />
<Menu>
<NavList>
<NavItem>
<Prueba to = "/">
<LinkIcon icon = "typcn:home-outline" />
Inicio
</Prueba>
</NavItem>
</NavList>
</Menu>
</SidebarContainer>
);
};
export default Sidebar;
Ответы 2
вам может понадобиться использовать Prueba вместо Link. поскольку вы наследуете компонент Link, применяете пользовательский CSS и сохраняете его в переменной с именем Prueba.
следовательно, импортируйте его в файл sidebar.js и используйте его там.
см.: https://codesandbox.io/s/objective-smoke-1bflsh?file=/src/App.js
добавлять
import 'Prueba' from sidebarStyled.js'
сдача
....
<Prueba to = "/">
<LinkIcon icon = "typcn:home-outline" />
Inicio
</Prueba>
....
Проблема
className реквизит стилизованного компонента Prueba не передается компоненту, который он пытается стилизовать, компоненту NavLinkReactRouterDom. Точнее, является передается неявно, когда в него распространяются реквизиты, но NavLinkReactRouterDom переопределяет и устанавливает свой собственный className реквизит.
const Link = function ({ to, children, ...props }) {
return (
<>
<NavLinkReactRouterDom
{...props} // <-- styled-component className pass here
className = {({ isActive }) => // <-- overridden here!
// console.info(isActive)
isActive ? "is-active" : undefined
}
to = {to}
>
{children}
</NavLinkReactRouterDom>
</>
);
};
Решение
Решение состоит в том, чтобы объединить свойство styled-component className с активным именем класса, используемым для компонента NavLinkReactRouterDom.
Пример:
const Link = function ({ to, children, className, ...props }) {
return (
<NavLinkReactRouterDom
{...props}
className = {({ isActive }) =>
[className, isActive ? "is-active" : null].filter(Boolean).join(" ")
}
to = {to}
>
{children}
</NavLinkReactRouterDom>
);
};
Извините, скопировал элемент, которого не было, отредактировал пост. Переименуйте компонент в
<Prueba>...<Prueba/>И он по-прежнему не применяет стили