使用具有触摸功能的显示器,我在任何控件上都没有悬停样式。

当我将鼠标悬停在Material UI按钮上时,会得到以下样式:

css -  Material 用户界面-禁用悬停:所有控件(所有状态)都没有媒体查询-LMLPHP

如何禁用所有@media(悬停:无)样式,而不覆盖每个控件/每个状态的样式?

我正在使用Material UI 3.9。

最佳答案

没有显式覆盖每次使用@media (hover: none)的方法,没有任何简便的方法,尽管可以(尽管很乏味)覆盖主题中的所有不同情况。

以下GitHub搜索应确定正在使用的大多数组件:https://github.com/mui-org/material-ui/search?q=%22hover%3A+none%22&unscoped_q=%22hover%3A+none%22

还可以创建一个删除这些样式的JSS插件。您可以找到一个示例here,该示例与您想要的相反(即,它始终应用触摸屏样式)。

我的意见是,最好还是保留原样。如果覆盖/删除这些样式,则会对使用触摸屏而不是鼠标的用户产生不利影响,因为如果没有这些样式,则悬停效果会在触摸后一直保持,直到发生其他地方的触摸为止。 Material-UI中的当前解决方案并不理想,但是如果没有更好的浏览器支持来检测用户是否使用触摸还是鼠标,很难将其更好地完成。

相关讨论/文档:


https://github.com/mui-org/material-ui/issues/15000
https://github.com/mui-org/material-ui/issues/15736
How do I change the ripple background color on Button?
https://material-ui.com/styles/advanced/#jss-plugins

10-06 04:24
查看更多