首页
学习
活动
专区
工具
TVP
发布
精选内容/技术社群/优惠产品,尽在小程序
立即前往

更改禁用状态后,Material UI按钮标签颜色不会更改

的原因是禁用状态下按钮的颜色是由Material UI的默认样式控制的,而不是根据自定义的颜色属性来确定。禁用状态下的按钮通常会显示为灰色,并且无法响应用户的点击事件。

要解决这个问题,可以通过自定义样式来更改禁用状态下按钮的颜色。可以使用Material UI提供的makeStyles函数来创建自定义样式,并在禁用状态下为按钮设置特定的颜色。

以下是一个示例代码:

代码语言:txt
复制
import React from 'react';
import Button from '@material-ui/core/Button';
import { makeStyles } from '@material-ui/core/styles';

const useStyles = makeStyles((theme) => ({
  disabledButton: {
    color: 'red', // 自定义禁用状态下按钮的颜色
    // 其他样式属性
  },
}));

const MyButton = () => {
  const classes = useStyles();

  return (
    <Button
      variant="contained"
      color="primary"
      disabled
      classes={{
        disabled: classes.disabledButton, // 应用自定义样式
      }}
    >
      禁用按钮
    </Button>
  );
};

export default MyButton;

在上述代码中,我们使用makeStyles函数创建了一个名为disabledButton的自定义样式类,其中设置了禁用状态下按钮的颜色为红色。然后,我们在Button组件中使用classes属性将自定义样式应用于禁用状态。

这样,当禁用状态被更改后,Material UI按钮标签的颜色将会根据自定义样式进行更改。

推荐的腾讯云相关产品:腾讯云云服务器(ECS),腾讯云对象存储(COS)

  • 腾讯云云服务器(ECS):腾讯云提供的弹性计算服务,可快速部署云服务器实例,支持多种操作系统和应用场景。详情请参考腾讯云云服务器(ECS)
  • 腾讯云对象存储(COS):腾讯云提供的高可靠、低成本的云端存储服务,适用于存储和处理大规模非结构化数据。详情请参考腾讯云对象存储(COS)
页面内容是否对你有帮助?
有帮助
没帮助

相关·内容

Material Design — 菜单(Menus)

菜单(Menus) Material Design链接:菜单 ? 菜单 菜单的形式是在短暂的动作条上展示选项列表。 菜单出现在与按钮,操作或其他控件的交互中。...如果不适用于某个情景,菜单项可能被禁用。 情景中的菜单应该根据app的当前的状态动态地更改其中的菜单选项。...左:应用栏中的操作太多时将会设置一个菜单    右:包含五个选项的菜单 菜单标签 按钮或控件的标签应该简洁而准确地反映菜单内的项目(如下图)。...菜单栏通常使用单个单词作为标签,如“文件”,“格式”和“编辑”。其他上下文可能需要更长的标签。 禁用菜单选项 菜单显示一组一致的菜单项。...例如,重做在没有任何可重做的操作时被禁用。 剪切和复制在没有选择内容时不可用。 ? 不可用的例子 ---- 行为 菜单出现在app内所有其他UI元素之上。 ?

5.8K100

Flutter中的按钮组件Button

Flutter提供了丰富的按钮组件可以让我们快速的构建UI界面。 常见的按钮组件如下: 1. RaisedButton 凸起的按钮; 2. FlatButton 扁平化的按钮; 3....FloatingActionButton 浮动按钮; 按钮组件常见的属性: 1. onPressed  按下按钮时触发的回调方法,为必填参数,如果值为 null 表示禁用按钮,会显示禁用相关样式; 2.... child 子组件; 3. textColor 文本颜色; 4. color 按钮的颜色; 5. disabledColor 按钮禁用时的颜色; 6. disabledTextColor 按钮禁用时的文本颜色...; 7. splashColor 点击按钮时水波纹的颜色; 8. highlightColor 长按按钮后按钮的颜色; 9. elevation 阴影的范围; 10. padding 内边距; 11....APP的底部导航条效果,以下是代码示例: import "package:flutter/material.dart"; // 标签切换页 class Tabs extends StatefulWidget

4.1K10
  • Flutter 中的按钮组件

    Flutter提供了丰富的按钮组件可以让我们快速的构建UI界面。 常见的按钮组件如下: 1. RaisedButton :凸起的按钮; 2. FlatButton :扁平化的按钮; 3....值的类型为Widget; 3. textColor 文本颜色。值的类型为Colors; 4. color 按钮的颜色。值的类型为Colors; 5. disabledColor 按钮禁用时的颜色。...值的类型为Colors; 6. disabledTextColor 按钮禁用时的文本颜色。值的类型为Colors; 7. splashColor 点击按钮时水波纹的颜色。...值的类型为Colors; 8. highlightColor 长按按钮后按钮的颜色。值的类型为Colors; 9. elevation 阴影的范围。...用浮动按钮实现类似闲鱼APP的底部导航条效果,以下是代码示例: import "package:flutter/material.dart"; // 标签切换页 class Tabs extends

    3.1K30

    Android Studio 4.1发布:可直接运行安卓模拟器、支持 Dagger 导航和 TensorFlow Lite 模型

    这些更改将使用户更容易使用推荐的 material 样式模式,并支持深色主题等现代 UI 特性。 ?....* 父级,并替换了更新后的 MDC 颜色和“on”属性。 颜色资源:colors.xml 中的颜色资源使用字面名称(例如 purple_500 代替了 colorPrimary)。...通过边框选择模式,我们可以更轻松地选择跟踪;我们还添加了新的分析标签,并添加了更多的帧渲染数据,以帮助你调查应用 UI 中的渲染问题。...有关线程状态分布的数据。 所选跟踪事件中运行时间最长的发生实例。 ?...在 Summary 标签页中查看汇总的统计信息 显示数据:在 Display 部分,Surface Flinger 和 VSYNC 的新时间线可帮助你调查应用 UI 中的渲染问题。

    4.2K30

    Material Design —悬浮响应式按钮(Buttons: Floating Action Button)

    Material Design链接:悬浮响应式按钮 ?...悬浮响应式按钮 悬浮响应式按钮代表一个应用中最重要的操作。 悬浮响应式按钮用于促进操作。 就像在UI上方浮动的圆形icon一样,它会在聚焦时改变颜色,并在选择时上浮。...避免对次要和消极的操作使用浮动操作按钮,包括以下内容: ·存档或清空 ·不明确的行为 ·警告或错误 ·有限制的任务,如剪切文本 ·应该在工具栏中的控件,如音量控制或更改字体颜色 浮动操作按钮不包含应用栏...icons或状态通知(如小红点)。...带标签的屏幕 在带标签的屏幕上,悬浮响应式按钮不应以与内容相同的方向退出屏幕。

    5.8K90

    纯干货!谷歌MD深色主题设计规范详解(附Sketch官方文件下载)

    在关键的元素上应当谨慎地使用强调色,尤其是文本和按钮。 寻找强调色 你可以使用官方的配色方案生成器来创建(或者查看)主题配色方案。它可以生成色调方案,也就是主色和次要色的一系列深浅颜色的变化。...不饱和的色彩,应该在深色的 UI 主题的其他地方多使用。 ? 高饱和度的品牌色应该使用浮动按钮(2),饱和度较低的主色则应该应用到文本等元素(1)之中。...使用 Material 色彩主题的基准配色 ? Material Design 默认主题的基准色 Material Design 深色主题的基准色 报错颜色 报错颜色主要用来指示出错的状况和状态。...重要、中等重要和被禁用的文本区别 定制应用 Material Design 中的一些用例可以帮你更好的设计深色主题。...禁用状态 所有的被禁用的组件,都使用不透明度为 12% 的白色用来呈现外轮廓和填充色,并使用不透明度为 38% 的白色来显示文本和表层的内容。 ?

    9.8K10

    Flutter UI原理

    因此,如果布局中只有一个widget发生更改(例如按钮或开关),则系统只需要重新计算这个相对较小的box。 3、Widgts库 这一层抽象提供了现成的UI组件,我们可以直接放入我们的应用中。...但是,Flutter团队不是自己构建每个UI组件,而是创建了两个库,其中包含Material和Cupertino(类似iOS)样式中常用的Widget。...由于Widgets非常轻量级且实例化成本低廉,因此它们非常适合描述应用程序的当前状态(也称为“配置”)。 “重量级”RenderObjects(创建起来很昂贵)不会每次都重新创建而是尽可能重用。...当我们将Container的颜色更改为红色时,框架将触发重建,这将重新创建整个Widget树,因为它是不可变的。...在我们的示例中, SimpleApp与以前的类型相同,并且具有与相应的SimpleAppRender对象相同的配置,因此不会有任何更改。

    3.4K20

    AngularDart Material Design 按钮 顶

    要指定按钮中的实际图标,请使用,material-icon>或。 no-ink:如果存在,则从按钮中消除涟漪效应。...('#myButton', green); @include button-color('#myButton', yellow); 将mixin用于颜色的优点是它们不会覆盖禁用的状态颜色。...您也可以像使用普通DOM元素一样使用CSS设置按钮的样式,尽管这也会影响禁用状态: /* Make #myButton green with yellow text */ #myButton { background...('#myButton', green); @include icon-button-color('#myButton', yellow); 将mixin用于颜色的优点是它们不会覆盖禁用的状态颜色。...您也可以像使用普通DOM元素一样使用CSS设置FAB样式,尽管这也会影响禁用状态: /* Make #myButton green with yellow icon */ #myButton { background

    1.3K40

    小程序|炎炎夏日、清爽一夏、头像大换装

    首页模块设计:      首页模块分为未授权和已授权使用用户信息两种状态,当用户刚进入页面未操作的情况下提供授权的操作按钮,当用户完成授权后展示头像制作的视图。...未授权使用头像状态功能概述: “Get 新头像 清爽一夏~”按钮:用户点击后进行用户信息获取授权的操作。...成品图: 已授权使用头像状态功能概述: 头像制作区域,用来显示授权的头像,并在这个区域完成贴纸的调整; 贴纸区,用来展示小程序内置的夏日贴纸素材,并提供选取; 按钮【保存下来】:将头像和贴纸保存至用户手机相册...通过微信开发者工具【右键】=>【新建 Page】创建about页面后将下面的配置添加到 app.json 完成底部标签栏的配置: 属性 描述 tabbar.color 未选中字体颜色 tabbar.selectedColor...选中的字体颜色 tabbar.list 配置每个标签的内容 tabbar.list.text 标签文案 tabbar.list.pagePath 页面的实际路径 tabbar.list.iconPath

    1K20

    Unity3d开发

    应用于所有按钮控件的样式 Toggle 切换开关 应用于所有切换开关的样式 Label 标签 应用于所有标签控件的样式 TextField 文本框 应用于所有文本框的样式 TextArea 文本区域...Hover 设置停留状态显示的颜色和背景颜色,可用于鼠标停留在那妞、输入框、选择框等上,但是没有点击时的显示 Active 设置激活状态的显示的颜色和背景颜色,用于按钮或者选择框点击后的显示 Focused...获得焦点状态,用于窗口的得到焦点后的显示 On Normal 默认状态,未选中状态,用于选择框控件显示的内容 On Hover 停留状态,用于选择框控件选中后文字的显示 On Active 激活状态,...用于选择框控件选中时文字显示 On Focused 获得焦点状态 Border 处理边界,他不会影响在按钮平面显示的宽高 Padding 设置按钮显示的内容和按钮边缘的偏移位置 Margin 设置按钮显示的内容于边界的偏移位置...排列顺序 Screen Space-Camera渲染模式 画布被放置在指定摄像机前的一个给定距离上,它支持在UI前面显示3D模型,等离子系统等内容,通过指定摄像机UI被呈现出来,画布会自定更改大小一适配屏幕

    9.1K30

    App项目实战之路(四):UI篇

    、标题栏、标签栏、输入框、按钮等一些UI组件也是从iOS UI Design和Material Design模板中提供的组件复制过来的,然后再进行修改。...那么,如果需要做修改,比如更改背景颜色,那只要修改了该Symbol,所有使用了该Symbol的页面的标题栏也全部会更新。...因为Symbol的这种特性,它就很适合用来定义如状态栏、标题栏、标签栏、按钮、头像等多处使用的通用组件。 在制作过程中,发现有几个快捷键很方便。...接着,继续按住Option键,然后拖动该图层,会看到有一个该图层的副本,如果一直按着Option键不放,拖动结束后松开手指将会复制出一个新的图层。...至于为什么需要适配这么多尺寸,就需要了解Android和iOS的一些UI尺寸的基础知识了,关于这个,下面这篇文章已经讲得很清楚了: 手机APP UI设计尺寸基础知识 Material Design

    1.2K30

    基础渲染系列(九)——复合材质

    从主要部分及其标签开始。 ? ? (主贴图标签) GUILayout如何工作? Unity编辑器是使用Unity的即时模式UI创建的。...除此之外,EditorGUI和EditorGUILayout类还提供对编辑器UI的小挂件和功能的访问。 标准着色器具有一个粗体标签,因此我们也需要一个粗体标签。...因为不会在其他任何地方使用它。 ? 再创建一种配置标签内容的方法。为此,我们只需要使用一个静态GUIContent实例来替换其文本和工具提示。...要删除关键字,请使用Material.DisableKeyword。让我们创建一个方便的函数,该函数基于布尔参数启用或禁用关键字。 ?...必须在要进行的更改之前调用RecordAction。它创建了旧状态的快照,因此撤消操作可以还原为旧状态。 ?

    3.5K10

    PyCharm使用指南(个性化设置、开发必备插件、常用快捷键)

    Material Theme UI 主题界面插件 Material Theme UI主题界面插件,旨在提供基于 Material Design设计语言的用户界面主题。...主要功能包括: 外观样式: Material Theme UI 插件会为代码编辑器添加 Material Design 风格的外观样式,包括按钮、边框、工具栏等元素,以及配色方案。...可定制化选项: 用户通常可以根据自己的喜好和需求来自定义主题的外观和配色方案,包括调整按钮样式、字体大小、高亮颜色等。...在File—>Settings—>Appearance & Behavior—>Material Theme UI—>Settings—>Selected Theme中更改主题 使用Material...Theme UI更改完主题后字体会和默认大小不符,需要在Editor—> Color Scheme—>Color Scheme Font中更改字体大小 Atom Material Icons美化图标插件

    5.4K40

    欢迎体验 | Wear OS 版 Compose 开发者预览版

    Compose 能 简化并加速 UI 开发,Wear OS 版 Compose 也是如此,借助内置的 Material You 支持,您可以用更少的代码构建更精美的应用。...依赖项 您对 Wear 设备作出的大部分更改都将位于顶部 架构分层。 这就意味着面向 Wear OS 设计时,您搭配 Jetpack Compose 使用的许多依赖项不会发生变化。...例如,UI、运行时间、编译器和动画依赖项都将保持不变。 不过,您需要使用合适的 Wear OS Material、导航及基础开发库,这与您之前在移动应用中所使用的开发库是不一样的。...、基础及导航依赖项后,您就可以着手开始了。...样式 颜色、排版及使用 MaterialTheme 的形状的代码亦如此。

    1.6K10
    领券