Стиль Blazor <NavLink> перестает работать при включении в качестве компонента

Чтобы воспроизвести эту проблему, я создал 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, эта проблема начинает показывать уничтожение шаблонов, которые я сделал ранее.

В чем причина этого и есть ли способ это исправить?

Спасибо!

У вас есть повторяющийся маршрут к /fetchdata, который остановит работу второй ссылки. Попробуйте удалить старую /fetchdata навигационную ссылку из <NavMenu>

Quango 18.12.2020 17:26

Ссылка работает. Проблема в стилизации. Я все еще пытался удалить ссылку, и это тот же результат.

Josh 19.12.2020 03:06

Любая идея, как заставить NavLink работать на Linux, все, что я получаю, это 404

Paul McCarthy 08.03.2023 13:49
Приемы CSS-макетирования - floats и Flexbox
Приемы CSS-макетирования - floats и Flexbox
Здравствуйте, друзья-студенты! Готовы совершенствовать свои навыки веб-дизайна? Сегодня в нашем путешествии мы рассмотрим приемы CSS-верстки - в...
Введение в CSS
Введение в CSS
CSS является неотъемлемой частью трех основных составляющих front-end веб-разработки.
Как выровнять Div по центру?
Как выровнять Div по центру?
Чтобы выровнять элемент <div>по горизонтали и вертикали с помощью CSS, можно использовать комбинацию свойств и значений CSS. Вот несколько методов,...
Навигация по приложениям React: Исчерпывающее руководство по React Router
Навигация по приложениям React: Исчерпывающее руководство по React Router
React Router стала незаменимой библиотекой для создания одностраничных приложений с навигацией в React. В этой статье блога мы подробно рассмотрим...
Система управления парковками с использованием HTML, CSS и JavaScript
Система управления парковками с использованием HTML, CSS и JavaScript
Веб-сайт по управлению парковками был создан с использованием HTML, CSS и JavaScript. Это простой сайт, ничего вычурного. Основная цель -...
CSS: FlexBox
CSS: FlexBox
Ранее разработчики использовали макеты с помощью Position и Float. После появления flexbox сценарий полностью изменился.
5
3
7 511
1
Перейти к ответу Данный вопрос помечен как решенный

Ответы 1

Ответ принят как подходящий

Это результат изоляции 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 не распознаны.

Josh 19.12.2020 02:58

Отображается предупреждение: "(CSS 4.0): "::deep" не является допустимым псевдоэлементом".

Josh 19.12.2020 03:11

@Wlbjtsthy ::deep требуется для подкомпонентов. Использование ::deep, которое вы видите в моем коде, было скопировано и вставлено из NavMenu.razor.css. Я добавлю необходимые изменения для работы css из NavMenu.razor.css без использования MenuItemComponent.razor.css для вас.

Brian Parker 20.12.2020 01:57

Другие вопросы по теме