Material-UI [v0.x] 悬停样式上的 RaisingButton

2024-02-11

我想更改悬停时 Material-UI RaisingButton 的样式,但似乎没有特定的选项可以做到这一点,因为悬停时发生的情况是由材料设计指南定义的。

然而,当鼠标悬停在按钮上时,有什么方法可以更改按钮的样式(主要是颜色和背景颜色)吗?

我看到 m-ui 的按钮使用了很多不同的图层,并且目前在按钮顶部添加了白色透明背景,以便它在所有主题颜色下都能表现良好。

(更准确地说,我想反转颜色和背景颜色之间的颜色。)


很抱歉回答晚了,但这也许会对其他人有所帮助。 Material-ui 支持这样的媒体查询(至少在 1.0 中):

const styles = {
  button: {
    padding: '10px',
    '&:hover': {
      background: 'blue'
    }
  },
  '@media (min-width: 1024px)': {
    button: {
      padding: '20px'
    }
  }
}

这个例子和更多可以从Mark Dalgleish 关于统一样式语言的帖子 https://medium.com/seek-blog/a-unified-styling-language-d0c208de2660.

本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系:hwhale#tublm.com(使用前将#替换为@)

Material-UI [v0.x] 悬停样式上的 RaisingButton 的相关文章

  • 如何选择一个元素但排除其子元素

    我明白 div hover not class 作品 但是 如何实现 LI 元素的 悬停 效果 但排除鼠标悬停在LI内的某个 DIV 上时的悬停效果 E G li Hello div Bye div li 我想获得 li 的悬停效果 li
  • 角度材质表-表内边框

    I am using Angular material table and I want to set border inside the table Using CSS I was able to set border Normal ca
  • 使用添加“title”属性换行符 到 JSX 元素

    我知道我可以在 HTML 中添加换行符title属性使用 10 但 React 避免了这一点 例如 这是一个 React 组件 其中包含一个标准的 未由 React 处理的组件title包含换行符的属性 并且可以在浏览器中看到效果 但是如果
  • 设置引导工具提示上的箭头样式[重复]

    这个问题在这里已经有答案了 我正在尝试使用以下方式设置工具提示样式 tooltip inner 但我遇到了麻烦 因为我找不到如何设置工具提示小箭头的样式 如屏幕截图所示 工具提示的箭头是黑色的 我想在其上添加新颜色 any suggesti
  • 如何使弹出窗口溢出:在溢出内可见:自动上下文

    我有一个 div 列表 如果超过父框 overflow x 应该滚动 并且在悬停时 我想看到一个弹出窗口 我的问题是 如果我将鼠标悬停在任何子 div 上 弹出窗口将被考虑用于溢出计算 但我只想让它在所有内容之上可见 而不是使其扩展滚动区域
  • Firefox -moz-border-radius 不会裁剪图像?

    如果设置了图像的边框半径 有谁知道如何让 Firefox 裁剪角 它包含的元素可以正常工作 但我会发现丑陋的角落伸出来 有什么方法可以解决此问题 而无需将图像设置为背景图像或在将其放在网站上之前对其进行处理吗 解决方法 将图像设置为容器元素
  • JQuery 设置动态最大宽度

    我不太擅长 jQuery 因此完整的代码解决方案将是理想的选择 该函数将 获取浏览器屏幕的 70 宽度 将该宽度转换为其相应的 px 值 设置最大宽度 mainContainer使用从转换 计算中获得的值 这是我要设置的容器的 CSS 样式
  • 使用 useState 更新状态时功能组件不更新 DOM

    EDIT 代码笔在这里https codepen io mark kelly the looper pen abGBwzv https codepen io mark kelly the looper pen abGBwzv 我有一个显示
  • 移动设备中的 CSS 响应式设计不适用于 uc 浏览器和 Opera Mini [关闭]

    Closed 这个问题需要调试细节 help minimal reproducible example 目前不接受答案 UC 和 Opera Min 浏览器上的响应式网站无法正常工作 我们使用媒体查询进行响应式设计 我搜索了一下 发现了一些
  • Sass mixin 将背景透明度恢复到 IE8

    我是 Sass 新手 并为此苦苦挣扎 我无法在两者中渲染颜色hex 对于 IE 和rgba 每一个小片段都让我感到沮丧 因为我还没有掌握语法 而且 Sass 的 Google 结果仍然很少 这是混合 mixin transparent he
  • 如何居中对齐数据表标题

    我是数据表新手 当我制作表格标题时 它总是左对齐 如何将标题设置为居中对齐 我已阅读 datatables net manual styling classes 和 datatables net reference option colum
  • CSS3 变换:IE 中的缩放

    我想使用CSS3属性transform scale div transform scale 0 5 0 5 有没有办法在 Internet Explorer 8 及更低版本中模仿这个 可能与filter或者 JavaScript 解决方案
  • Firefox 忽略 CSS 中的最小高度

    由于某些原因 最小高度在 Firefox 上不起作用 我尝试在 body 上设置 min height 但 Firefox 完全忽略了它 由于我的页面是动态的 我不能只将高度设置为 100 我应该怎么办 body border 1px so
  • Twitter Typeahead 上使用 Bootstrap 3 的 CSS 问题

    随着 Bootstrap 3 的发布 Typeahead 已被删除 取而代之的是 https github com twitter typeahead js https github com twitter typeahead js 我已经
  • Chrome 版 Firebug Lite 会破坏悬停效果和鼠标悬停事件

    我有一个奇怪的问题 使用时适用于 Chrome 的 Firebug Lite https chrome google com webstore detail firebug lite for google c bmagokdooijbeeh
  • 使用 float:left 与 display:inline-block 的 jQuery UI 拖放排序比较

    我这里有两个例子 这两个例子之间的唯一区别是 一种使用display inline block 另一种使用float left li doc item 显示 内联块 与 li doc item float left 我的问题是 displa
  • 全高全宽 CSS 布局

    我正在寻找一种方法来创建具有 5 个区域的纯 CSS 无 JavaScript 布局 如下所示 H A B C F
  • Svelte 条件元素类报告为语法错误

    我正在做一个if块每if 块的精简指南 https svelte technology guide if blocks 这看起来很简单 但 Svelte 认为这是一个语法错误 svelte plugin ParseError Unexpec
  • 如何从 CSS 选择器中提取类名?

    故事 我目前正在构建一个 ESLint 规则 以警告在 CSS 选择器定位器中使用引导布局导向和角度技术类 目前我在字符串方法中使用简单的子字符串 for var i 0 i lt prohibitedClasses length i if
  • 使用flex-basis控制行上显示的项目数

    我想在使用 Flex 时将元素推出以隐藏它们 例如 如果flex basis为 50 仅显示两个项目弯曲到给定空间 而其他元素则在overflow hidden 领土 Or if flex basis为 25 则仅显示 4 个 Flex 元

随机推荐

  • VSCode 远程容器 - 错误:ENOSPC:设备上没有剩余空间

    我一直在使用VSCode 远程容器插件 https marketplace visualstudio com items itemName ms vscode remote remote containers一段时间没有问题 但是今天 当我
  • Python运行时:重新编译和重用C库

    我正在开发一个用于用户定义函数的数值分析的工具 这个想法是用 Python 制作一个方便的 UI 用户可以在其中输入 C 函数 然后按下按钮 并接收一些输出数据 计算可能需要几分钟或几小时 因此仅使用 Numpy 的性能是不可接受的 我尝试
  • 确定android CPU速度?

    我的一位朋友从事手机游戏开发 那么他面临的问题是这样的 在他的游戏中 一些 root 的手机用户能够获得非常高的分数 这是完全不可能的 除非 Android 设备的 CPU 或系统时钟速度很慢 情况就是如此 这些用户使用一些第三方应用程序
  • PyQt5 按钮未连接

    我正在尝试使用 PyQT5 构建一个简单的 GUI 其中有 3 个按钮用于打开文件浏览器 还有一个按钮用于对所选文件进行处理 但我无法让按钮连接到执行此操作所需的功能 In the Ctrl类 该 connect signals函数似乎没有
  • 如何使用字符串值获取 NSArray 中对象的索引?

    我想获取类别 NSMutableArray 中对象的索引 类别对象有一个属性 category title 我希望能够通过传递category title 的值来获取索引 我浏览了文档 找不到解决此问题的简单方法 NSArray不保证您只能
  • C++11 变量缩小,没有 GCC 编译器警告

    缩小范围的概念似乎非常简单 但是 有人可以解释一下为什么下面的某些代码会导致 缩小 编译器错误而其他代码则不会 此代码会按预期产生错误 constexpr int a 255 unsigned char b a OK unsigned ch
  • 这种生产者/消费者实现有什么问题?

    所以我正在考虑在 C 中使用简单的生产者 消费者队列 我最终将使用 boost 进行线程处理 但此示例仅使用 pthreads 我最终还将使用一种更加面向对象的方法 但我认为这会掩盖我目前感兴趣的细节 无论如何 我担心的具体问题是 由于此代
  • 如何获取循环发送的每条短信的发送报告android?

    我正在开发短信应用程序 我需要循环发送短信 注册了 SENT 和 DELIVERED 状态的广播接收器 但问题是如何区分哪个送达通知是针对我发送的哪条短信 我正在使用 SMSMANAGER 类发送短信 我的问题与这里讨论的类似 如何监控每条
  • Python 在 Windows 7 上启动非常慢

    在我的 Windows 7 计算机上加载 Python 所需的时间比在虚拟机 在 Windows 内部相同硬件上 上运行的 Ubuntu 14 04 长 17 倍 Anaconda3发行版在Windows和Ubuntu上使用默认的pytho
  • 将图像添加到项目(旋转器)

    您好 我是 Android 爱好者 我想将图像添加到我的微调项目中 不幸的是 我不知道该怎么做 下面是我的 xml 文件和 MainActivity 谢谢阅读 XML FILE
  • 如何确定UIBarButtonItem在UIToolbar中的位置?

    确定 UIToolbar 中 UIBarButtonItem 的 x y 位置的最简单方法是什么 我找到的唯一答案是有什么方法可以知道 uibarbuttonitem 被绘制在哪里 http www cocoabuilder com arc
  • 如何在 jQuery 中编辑 CSS 规则?

    目的是动态地将行添加到表中 并且稍后手动应用规则不太好 而且更慢 具体的例子是我正在创建一个树表来表示文件夹目录 每个文件夹都是一个div 每一个div 有一个ul与li对于每列的信息 这些li有一个与列名相同的类名 这提供了列宽 但是我想
  • 在 bash 中解析 mobileprovision 文件?

    我正在构建一个 php bash mysql 系统 用于自动分配 iPhone 应用程序 但我想读取项目的 mobileprovision 文件中的应用程序标识符密钥 并据此更改它的 info plist 文件 如果 cfbundleide
  • C语言中printf函数是如何工作的?

    我在测试printf函数时遇到了一个问题 首先我写这样的代码 int main void char a a printf a f n a return 0 输出是 然后我写代码 int main void float b a printf
  • PHP 大括号,这段代码的含义是什么

    我有这段代码 用于从数据库获取查询 在MyBB http www mybb com来源 query SELECT fields FROM this gt table prefix table 我的问题是 什么意思 table table 和
  • 如何使用管道运行命令?

    我正在尝试使用 execvp 运行 ls wc 所以我创建了一个管道 然后创建了一个子管道 我关闭父 子中适当的 读 写 端 然后将另一端映射到标准输出 标准输入 然后我在父级中使用 execvp 运行 ls 在子级中使用 wc 当我运行程
  • Visual Studio Code 不使用池映射将调试器附加到 python 中的多进程

    你好 我正在尝试在 python 中调试多进程 下面是我使用 Pool 运行多进程的一部分 pool Pool num half logical cpus pool result dict pool starmap process batc
  • 将 NSArray 转换为 NSMutableArray Swift

    我正在尝试转换self assets NSArray to NSMutableArray并将其添加到picker selectedAssets这是一个NSMutableArray 这段代码在 swift 中会是什么样子 Objective
  • 如何强制用户下载图像(如下载 pdf)?

    因此 我编写了一个图像库 其中包含下载原始图像的选项 默认情况下 它显示图像的调整大小版本 我很想知道如何 下面的代码将强制用户保存 pdf 而不是使用浏览器查看它 我希望通过将单击操作与 jQuery 绑定来实现图像 jpg gif pn
  • Material-UI [v0.x] 悬停样式上的 RaisingButton

    我想更改悬停时 Material UI RaisingButton 的样式 但似乎没有特定的选项可以做到这一点 因为悬停时发生的情况是由材料设计指南定义的 然而 当鼠标悬停在按钮上时 有什么方法可以更改按钮的样式 主要是颜色和背景颜色 吗