我的文字装饰（下划线）未在移动设备上显示

Question

我有一个手动加下划线的链接列表（不使用默认链接下划线）。它适用于 chrome devtools 移动预览版，但是当我在实际的移动设备上部署和查看时，下划线不存在。

我使用了内联样式以及 css，并且尝试将 !important 添加到下划线样式中。

在 .js 文件中

<Link  className="BigNames-link" to='/Adobe' style={{textDecoration:'none'}}>
                    <span style={{textDecoration: 'underline #101010  !important'}} className='Name'>Adobe Creative Cloud</span>
                    <span style={{textDecoration: 'underline #101010  !important'}} className='Text'>: App Banner</span>  <img src={Lock} alt="..."className="Lock"></img>
                </Link>
                <Link className="BigNames-link" to='/Wacom'>
                    <span style={{textDecoration: 'underline #101010  !important'}} className='Name'>Wacom</span>
                    <span style={{textDecoration: 'underline #101010  !important'}} className='Text'>: Product Launch Emails</span>  <img src={Lock} alt="..."className="Lock"></img>
                </Link>

在css文件中

.BigNames span{
    text-decoration: underline #101010  !important;
}

再一次，它完全符合我的要求。看起来它应该根据 devtools“移动”视图工作。它根本没有在移动设备上的任何链接上显示下划线。

Answer 1

因为你给错了课。您使用 .BigNames 类而不是 BigNames-link 类。 试试这个：

.Name, .Text{
text-decoration: underline #101010  !important;
}