使用具有触摸功能的显示器,我在任何控件上都没有悬停样式。
当我将鼠标悬停在Material UI按钮上时,会得到以下样式:
如何禁用所有@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