如何移除Dash Bootstrap导航栏hover边框及解决404页面失效问题

一、移除导航栏Hover时的黑色边框 #

该黑色边框是Dash Bootstrap Components默认的:hover/:focus样式导致的，通过自定义CSS覆盖即可解决：

方法1：添加全局自定义样式 #

在app布局中插入html.Style标签，统一覆盖所有导航链接的hover样式：

from dash import html

# 自定义CSS消除hover边框
custom_css = html.Style("""
    .nav-link:hover, .nav-link:focus {
        outline: none !important;
        box-shadow: none !important;
        border-color: transparent !important;
    }
""")

# 整合到布局中
app.layout = html.Div([
    custom_css,
    header,
    dash.page_container
])

方法2：单独设置NavLink样式 #

如果只需针对单个导航项生效，直接给dbc.NavLink添加style参数：

dbc.NavItem(dbc.NavLink('Home', href='/', style={"border": "none", "boxShadow": "none"})),

二、移除导航栏404项后404页面不生效的解决 #

Dash Pages的404页面无需在导航栏添加入口，只需完成以下配置即可自动触发：

方案1：注册独立404页面 #

在pages目录下创建404.py文件，内容如下：

import dash
from dash import html

dash.register_page(
    __name__,
    path="/404",
    title="404 - 页面未找到"
)

layout = html.Div([
    html.H1("404 - 页面未找到"),
    html.P("你访问的页面不存在，请检查路径是否正确。")
])

配置完成后，用户访问不存在的路径时，Dash会自动跳转到该页面。

方案2：设置全局404布局 #

如果不想单独创建页面文件，可在app初始化后直接配置全局404布局：

app = Dash(__name__, 
           use_pages=True, 
           title='Portfolio Optimization', 
           external_stylesheets=[dbc.themes.SLATE, dbc_css]
           )

# 全局404页面配置
app.not_found_layout = html.Div([
    html.H1("404 - 页面未找到"),
    html.P("抱歉，你访问的页面不存在。")
])

内容的提问来源于stack exchange，提问作者grayred8