Чтобы воспроизвести эту проблему, я создал MenuItemComponent
<li class = "nav-item px-3">
<NavLink class = "nav-link" href = "fetchdata">
<span class = "oi oi-list-rich" aria-hidden = "true"></span> Fetch data
</NavLink>
</li>
а затем включил компонент в файл NavMenu
<div class = "top-row pl-4 navbar navbar-dark">
<a class = "navbar-brand" href = "">Porcellus</a>
<button class = "navbar-toggler" @onclick = "ToggleNavMenu">
<span class = "navbar-toggler-icon"></span>
</button>
</div>
<div class = "@NavMenuCssClass" @onclick = "ToggleNavMenu">
<ul class = "nav flex-column">
<li class = "nav-item px-3">
<NavLink class = "nav-link" href = "" Match = "NavLinkMatch.All">
<span class = "oi oi-home" aria-hidden = "true"></span> Home
</NavLink>
</li>
<li class = "nav-item px-3">
<NavLink class = "nav-link" href = "counter">
<span class = "oi oi-plus" aria-hidden = "true"></span> Counter
</NavLink>
</li>
<li class = "nav-item px-3">
<NavLink class = "nav-link" href = "fetchdata">
<span class = "oi oi-list-rich" aria-hidden = "true"></span> Fetch data
</NavLink>
</li>
<MenuItemComponent></MenuItemComponent>
</ul>
</div>
@code {
private bool collapseNavMenu = true;
private string NavMenuCssClass => collapseNavMenu ? "collapse" : null;
private void ToggleNavMenu()
{
collapseNavMenu = !collapseNavMenu;
}
}
И тогда выход
Я не думаю, что эта проблема существует в ядре asp.net 3.1.
Кажется, что если я оберну содержимое в компонент, стили css перестанут работать.
Но когда я обновился до .net 5, эта проблема начинает показывать уничтожение шаблонов, которые я сделал ранее.
В чем причина этого и есть ли способ это исправить?
Спасибо!
Ссылка работает. Проблема в стилизации. Я все еще пытался удалить ссылку, и это тот же результат.
Любая идея, как заставить NavLink работать на Linux, все, что я получаю, это 404
Это результат изоляции css. Если вы хотите, чтобы компонент NavLink выглядел так же, вам необходимо создать файл .css с тем же именем, что и у компонента, со стилями для навигационной ссылки. Стили можно найти в текущем NavMenu.razor.css. В качестве альтернативы, если вы хотите, чтобы стили оттуда работали на подкомпонентах, вы должны использовать комбинатор ::deep.
MenuItemComponent.razor.css
(Это было вырезано и вставлено из NavMenu.razor.css
)
.oi {
width: 2rem;
font-size: 1.1rem;
vertical-align: text-top;
top: -2px; }
.nav-item {
font-size: 0.9rem;
padding-bottom: 0.5rem; }
.nav-item:first-of-type {
padding-top: 1rem; }
.nav-item:last-of-type {
padding-bottom: 1rem; }
.nav-item ::deep a {
color: #d7d7d7;
border-radius: 4px;
height: 3rem;
display: flex;
align-items: center;
line-height: 3rem; }
.nav-item ::deep a.active {
background-color: rgba(255, 255, 255, 0.25);
color: white; }
.nav-item ::deep a:hover {
background-color: rgba(255, 255, 255, 0.1);
color: white; }
Альтернативное решение — изменить NavMenu.razor.css
и не использовать указанный выше css.
.navbar-toggler {
background-color: rgba(255, 255, 255, 0.1);
}
.top-row {
height: 3.5rem;
background-color: rgba(0,0,0,0.4);
}
.navbar-brand {
font-size: 1.1rem;
}
::deep .oi {
width: 2rem;
font-size: 1.1rem;
vertical-align: text-top;
top: -2px;
}
::deep .nav-item {
font-size: 0.9rem;
padding-bottom: 0.5rem;
}
::deep .nav-item:first-of-type {
padding-top: 1rem;
}
::deep .nav-item:last-of-type {
padding-bottom: 1rem;
}
::deep .nav-item a {
color: #d7d7d7;
border-radius: 4px;
height: 3rem;
display: flex;
align-items: center;
line-height: 3rem;
}
::deep .nav-item a.active {
background-color: rgba(255,255,255,0.25);
color: white;
}
::deep .nav-item a:hover {
background-color: rgba(255,255,255,0.1);
color: white;
}
@media (min-width: 641px) {
.navbar-toggler {
display: none;
}
.collapse {
/* Never collapse the sidebar for wide screens */
display: block;
}
}
Привет, спасибо за ответ. Из документа кажется, что мне нужно включить комбинацию ::deep в NavMenu.razor.css, а не в MenuItemComponent.razor.css. Когда я проверил, комбинаторы ::deep уже есть, но отображается желтое предупреждение о том, что эти комбинаторы ::deep не распознаны.
Отображается предупреждение: "(CSS 4.0): "::deep" не является допустимым псевдоэлементом".
@Wlbjtsthy ::deep требуется для подкомпонентов. Использование ::deep, которое вы видите в моем коде, было скопировано и вставлено из NavMenu.razor.css. Я добавлю необходимые изменения для работы css из NavMenu.razor.css без использования MenuItemComponent.razor.css для вас.
У вас есть повторяющийся маршрут к
/fetchdata
, который остановит работу второй ссылки. Попробуйте удалить старую/fetchdata
навигационную ссылку из<NavMenu>