如何修改Dash中dcc.Link的下划线、字体及颜色？

要去掉Dash中dcc.Link的默认下划线，同时修改字体样式和颜色，你可以通过内联样式或者统一CSS类两种方式实现，下面是具体方案：

方法一：直接给单个链接添加内联样式 #

如果只是少数几个链接需要修改，直接在dcc.Link组件里通过style参数自定义即可，一步到位：

def get_index(): 
    index = html.Div([ 
        dcc.Link(
            'Page 1', 
            href='/page-1',
            style={
                'textDecoration': 'none',  # 核心：移除下划线
                'fontFamily': 'Arial, sans-serif',  # 自定义字体，备选字体兜底
                'color': '#2c3e50',  # 字体颜色（这里用深灰色，也可以用'red'、'rgb(0,0,0)'）
                'marginRight': '15px'  # 可选：给链接加横向间距，排版更美观
            }
        ), 
        html.Br(), 
        dcc.Link(
            'Page 2', 
            href='/page-2',
            style={
                'textDecoration': 'none',
                'fontFamily': 'Arial, sans-serif',
                'color': '#2c3e50'
            }
        ) 
    ], style = {'display':'inline-block','columnCount': 2}) 
    return index

关键样式属性说明：

• textDecoration: 'none'：覆盖浏览器默认的链接下划线样式（默认是underline）
• fontFamily：支持多种字体组合，优先用前面的字体，找不到就用后面的备选
• color：支持颜色名称、十六进制值、RGB/RGBA值，灵活度很高

方法二：用CSS类统一管理（适合多链接场景） #

如果你的仪表盘有大量链接需要统一样式，用CSS类维护更高效，避免重复代码：

1. 先在项目的assets文件夹下创建custom.css文件（Dash会自动加载这个文件夹里的CSS），写入自定义样式：

/* 统一链接样式 */
.dash-custom-link {
    text-decoration: none !important;
    font-family: 'Arial', sans-serif;
    color: #2c3e50;
}

/* 可选：添加鼠标悬停时的颜色变化 */
.dash-custom-link:hover {
    color: #3498db;
}

/* 可选：区分已访问链接的颜色 */
.dash-custom-link:visited {
    color: #9b59b6;
}

2. 然后在dcc.Link组件里引用这个类：

def get_index(): 
    index = html.Div([ 
        dcc.Link('Page 1', href='/page-1', className='dash-custom-link'), 
        html.Br(), 
        dcc.Link('Page 2', href='/page-2', className='dash-custom-link') 
    ], style = {'display':'inline-block','columnCount': 2}) 
    return index

这样所有使用dash-custom-link类的链接都会自动应用样式，后续修改只需要改CSS文件即可。

内容的提问来源于stack exchange，提问作者Mr. President