Material UI - 禁用悬停：所有控件（所有状态）的无媒体查询答案

【问题标题】：Material UI - disable hover:none media queries for all controls (all states)Material UI - 禁用悬停：所有控件（所有状态）的无媒体查询
【发布时间】：2020-02-07 17:46:41
【问题描述】：

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

当我将鼠标悬停在 Material UI 按钮上时，我会看到以下样式：

如何禁用所有 @media (hover: none) 样式，而不覆盖每个控件/每个状态的样式？

我正在使用 Material UI 3.9。

【问题讨论】：

标签： css reactjs material-ui

【解决方案1】：

如果不显式覆盖 @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目前的解决方案并不理想，但如果没有更好的浏览器支持来检测用户是触摸还是鼠标，很难做得更好。

相关讨论/文档：

【讨论】：

感谢您的链接，因此禁用媒体查询不是一个好主意，我将保持原样。即使浏览器在另一台显示器上（非触摸），它也只会在笔记本电脑处于平板电脑位置（在我的情况下总是如此）时重现。

【解决方案2】：

此修复确保使用 @media (hover: none) 的样式仅在使用触摸时启用。每当触发 touchstart 时，它都会向 body 标签添加一个触摸设备类。适用于@material-ui/core v4.9.9

import { create } from 'jss';
import { StylesProvider, jssPreset } from '@material-ui/core/styles';

const jss = create({
    plugins: [...jssPreset().plugins, {
        onProcessRule: (rule, sheet) => {
            if(rule.type === 'style' && rule.options.parent.query === '@media (hover: none)'){
                rule.key = 'body.touch-device ' + rule.key;
                rule.selectorText = 'body.touch-device ' + rule.selectorText;
            }
            return rule;
        }
    }],
});

window.addEventListener('touchstart', function ontouchstart() {
    window.document.body.classList.add('touch-device');
    window.removeEventListener('touchstart', ontouchstart);
});

export default function HoverFix(props){
    return <StylesProvider jss={jss}>{props.children}</StylesProvider>
}

【讨论】：