覆盖使用媒体查询的 MuiTab 等组件

2024-02-23

我正在尝试为 MuiTab 提供 CSS 覆盖以增加字体大小。

使用有关material-ui上的CSS覆盖的文档,我已经设法增加了大多数元素的字体大小,但是我陷入了使用媒体查询的元素,因为它们产生比我通过覆盖提供的规则更具体的CSS规则。

主题.ts:

import { createMuiTheme } from '@material-ui/core';

const fontSizeStyle = {
  fontSize: '1rem',
};

const fontFamilyStyle = {
  fontFamily: '"Ubuntu", sans-serif'
};

const theme = createMuiTheme({
  overrides: {
    MuiTab: {
      root: {
        ...fontFamilyStyle,
        ...fontSizeStyle,
      },
      label: fontSizeStyle,
    },
  }
});

export default theme;

这会产生以下应用于 MuiTab 的 css 规则:

该规则由以下文件生成:

https://github.com/mui-org/material-ui/blob/master/packages/material-ui/src/Tab/Tab.js https://github.com/mui-org/material-ui/blob/master/packages/material-ui/src/Tab/Tab.js

[theme.breakpoints.up('md')]: {
  fontSize: theme.typography.pxToRem(13),
},

有谁有如何使用 createMuiTheme 函数覆盖此媒体查询的示例?我没有断点,所以也许我还需要指定断点才能在我的覆盖中使用它们

亲切的问候


我通过以下方式指定它解决了它:

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

覆盖使用媒体查询的 MuiTab 等组件 的相关文章

  • 鼠标悬停时放大图像而不使用 Jquery 推送其他图像?

    当您将鼠标悬停在图像缩略图上 例如 Google 图片正在使用的缩略图 时 我正在尝试创建图像放大效果 但是 我遇到了一个问题 即放大的图像根据放大的图像的位置不断将另一张图像推到另一个位置 这是我到目前为止所拥有的
  • 伪元素和 SELECT 标签

    是否select标签允许使用 after选择器是为了在之后创建一个伪元素吗 我在 Mac 上尝试过 Chrome Safari 和 Firefox 但似乎不起作用 这是我使用过的折衷方案 http jsfiddle net pht9d295
  • css 适用于 Firefox/Chrome,但不适用于 IE

    我有这个 HTML 和 css 在 chrome firefox 中工作正常 但在 IE 上 标题布局超出了位置 并且悬停时未显示子菜单 您能帮忙吗
  • 有没有办法编写屏幕阅读器会忽略的内容?

    我刚刚开发了一个需要视力正常和视障用户都可以访问的页面 内容的某些元素仅与视觉元素相关 因此根本不适用于使用屏幕阅读器的人 例如 链接在新窗口中打开视听演示文稿 但由于我无法控制的情况 窗口的大小被笨拙地调整 因此有一条消息说您应该调整窗口
  • 我正在尝试向我的 vue.js 项目添加背景图像

    我想添加覆盖整个页面的背景图像 然而现在看起来是这样的 我希望它跨越整个网页 在 vue js 中这将如何完成 我还想要一个动画工具栏 以便当页面不滚动时工具栏是透明的并呈现背景图像的外观 当它滚动时 工具栏将具有当前的蓝色 这是我的小提琴
  • 滚动时输入自动完成位置错误(chrome)

    我在输入文本的默认自动完成功能方面遇到了一些麻烦 滚动时它不会相应移动 我希望自动完成文本保留在输入的正下方 有办法做到这一点吗 我在 Chrome 浏览器版本 57 0 2987 133 中发生这种情况 fiddle https jsfi
  • 更快地开发和测试打印样式表的方法(避免每次都进行打印预览)?

    这是我现在的流程 保存对 print css 的更改 打开浏览器并刷新页面 右键单击并选择 打印 gt 打印预览 Firefox 但实际上是任何浏览器 第三步让我烦恼 我想知道是否可以通过插件或其他东西将其从流程中删除 只需选择以打印媒体形
  • 扩展位置绝对div超出溢出隐藏div

    我已经好几个月没有做过CSS了 所以我可能会错过一些简单的东西 但无论解决方案是什么 我都无法弄清楚 所以问题就在这里 这是我的代码的简化版本 div style height 100 width 200px div style margi
  • 如何在CSS中制作一个带有边框的可调整大小的心形

    我想要制作一个心形 用户可以将其大小调整为任意宽度和高度 并且边框为 1 像素 我尝试了用纯 CSS 制作的心形 https stackoverflow com a 17386187 1404447 https stackoverflow
  • 如何在表格列标题处垂直旋转文本

    我用过这个数据表 http www datatables net 在我的网页上 这是fiddle http jsfiddle net fxju7 2 链接我放置代码的地方 我想要 第一个数字第二个数字列应该垂直旋转 我已经做到了 但是 问题
  • CSS: *html #id_name

    我有这个代码 html alertBox height 100px modalContainer gt alertBox position fixed 这是由CSS支持的吗 我在其他网站上找到了这段代码 我忘记了链接 html alertB
  • 如何向 CSS 形状添加偏移轮廓?

    我在创建带有斜角边缘的块时遇到了一些问题 此外我需要一个斜角的边框并稍微偏离主块 问题是这个块可以根据屏幕响应 不知道具体的方法 希望大家帮忙 这就是我现在所做的 box display flex padding 20px height 2
  • jQuery 或 Javascript - 如何禁用窗口滚动而不溢出:隐藏;

    您好 是否可以在不使用的情况下禁用窗口滚动overflow hidden 当我悬停一个元素时 我试过 chat content on mouseenter function document scroll function e if e h
  • 更改

    标签中一个单词的颜色

    我正在处理一份 html 文档 并且只想在我的文档中创建一个单词 p 标记不同的颜色 如果不做完全不同的事情 这可能吗 p p tag p p I want to make only THIS word blue p p style dis
  • CSS 无法从带有 php“includes”的相对路径工作

    文件夹结构 index php includes header html css style css 我的主项目文件夹中有 2 个子文件夹 一个是名为 includes 的文件夹 另一个名为 css 我有我的 index php主文件夹中的
  • 为不同的字体系列指定不同的字体大小

    有没有办法为不同的字体系列指定不同的字体大小 我想要使 用的字体 出于产品品牌目的 是一种有点罕见的字体 FlashDLig 并非所有 PC 和浏览器都支持 我的一台带有 IE 9 的 Windows 7 PC 不显示它 现在 对于我使用
  • 内嵌显示定义术语和描述

    我正在为页面上的某些元素使用定义列表 并需要它们内联显示 例如 它们normally看起来像 我需要它们看起来像 注意多个 DD 我可以让它们在 moz 中使用 float 来正常工作 但无论我尝试什么 它们都无法在 IE 中工作 我通常会
  • 如何将 Vue.js 作用域样式应用于通过视图路由器加载的组件?

    如何将 Vue js 作用域样式应用于通过以下方式加载的组件
  • 如何垂直对齐div内的图像

    如何在包含的内容中对齐图像div Example 在我的示例中 我需要将 img in the div with class frame div class frame style height 25px img src http jsfi
  • PDF 在 Safari 中隐藏 Jquery Modal

    这是与我有关的事情this https stackoverflow com questions 24052681 pdf hide jquery modal in ie问题 在 IE 中 我在对话框中使用 iframe 解决了问题 所以它工

随机推荐

  • CSS - 并排的内联块,宽度为 100%

    我有两个带有文本的块 文本的长度不是恒定的 用户输入 左侧块中包含短文本 但右侧块可能包含非常长的文本 这些块应该并排出现 并且分布在父级恒定宽度的 100 上 不多也不少 简化示例 https jsfiddle net hh6a03cy
  • 在恒定空间和线性时间内向后打印单链表

    我听到一个面试问题 向后打印单链表 在恒定空间和线性时间中 我的解决方案是反转链接列表 然后像这样打印它 还有其他非破坏性的解决方案吗 您已经找到了大部分答案 将链表反转到位 然后将列表遍历回开头以打印它 为了防止它 永久 破坏性 请就地反
  • AtomicBoolean 与同步块

    我试图通过替换一些来减少代码中的线程争用synchronized块与AtomicBoolean 这是一个例子synchronized public void toggleCondition synchronized this mutex i
  • Subversion 和 CVS 中添加自动内容的标签怎么称呼?

    像 log and version 在签入文件时添加数据 我有兴趣查看其他人以及他们可以提供哪些信息 但除非我知道他们叫什么 否则我无法获得太多信息 Subversion 和 CVS 都称它们为Keywords 在这里查看 SVN 手册 h
  • 窗口函数过滤当前行

    这是后续this https stackoverflow com questions 48000013 optimize slow aggregates in lateral join问题 我的查询被改进为使用窗口函数而不是内部的聚合LAT
  • 你如何制作一个makefile

    我想知道如何为 Unix 创建 makefile 这里有一个好的生成文件教程 http oucsace cs ohiou edu bhumphre makefile html 搜索 如何创建 makefile 后 Google 上的第一个结
  • 修复 Chocolatey“访问被拒绝”的问题

    我刚刚第一次使用安装了 Chocolateythis https i stack imgur com fw9WX png管理员 cmd 中的命令 SystemRoot System32 WindowsPowerShell v1 0 powe
  • dlopen 中对 __dlopen 的未知引用

    dlopen位于libdl a但是当我将我的应用程序链接到libdl a gcc 链接器抛出此错误 unknow reference to dlopen called in dlopen 我应该导入另一个吗 a 当我尝试静态编译时dlope
  • C 将输入文本文件解析为单词

    我正在尝试将输入文件 包含具有多行和分隔符的文本文档 即 解析为单词 我的函数 分割函数 是 int splitInput fp int i 0 char line 255 char array 5000 int x while fgets
  • Java Lambda:迭代 2 个暗淡数组并保持当前索引

    我是 Java 8 的 Lambda 表达式的新手 我想制定以下内容 我有一个二维数组 我想在应用程序代码中对其进行多次迭代 并对数组中的项目进行处理 在我执行以下操作之前 public static abstract class BlaB
  • 将 std::bind 的结果传递给 std::function “重载”

    我有类似的问题在 C 中将不同的 lambda 传递给函数模板 https stackoverflow com questions 40523248 passing different lambdas to function templat
  • 闭包编译器对命名空间枚举发出警告

    以下示例代码生成有关高级优化的编译器警告 JSC UNSAFE NAMESPACE 为命名空间 NS 创建的不完整别名 如果我删除 enum 注释 它不会发出警告 var NS enum string NS type FOO bar NS
  • 如何在 jupyter 笔记本中使用 pandas 分析时修复此错误

    每次我在不同的数据集中使用 pandas 分析时 笔记本都会显示此错误 IndexError 仅整数 切片 省略号 numpy newaxis None 且整数或布尔数组有效 指数 import pandas as pd df pd rea
  • Webpack ProvidePlugin 与外部插件?

    我正在探索使用的想法Webpack http webpack github io with 骨干网 js http backbonejs org 我已经遵循了快速入门指南 并且对 Webpack 的工作原理有了大致的了解 但我不清楚如何加载
  • Web 服务中的例外

    我的小组正在开发一个基于服务的 NET WCF 应用程序 我们正在尝试决定如何处理内部服务中的异常 我们应该抛出异常吗 返回序列化为 XML 的异常 只返回错误码 请记住 用户永远不会看到这些异常 它仅适用于应用程序的其他部分 WCF 用途
  • 对两个表进行 SQL 查询 - 返回一个表中的行,而另一个表中没有条目

    我有两个数据库表 类别和超级类别 用于我正在开发的库存控制系统 类别 ID Category 类别名称 超级类别 ID SuperCategory 类别 ID 超级类别 ID 我将类别 子类别关系放入 SuperCategories 表中
  • 如何用链接替换普通 URL,例如? [复制]

    这个问题在这里已经有答案了 我几乎已经成功了 我想知道是否有much更好的方法 根本问题 https stackoverflow com q 37684 1153319 Fiddle http jsfiddle net 5cr6K func
  • 索引(从零开始)必须大于或等于零

    嘿 我不断收到错误 索引 从零开始 必须大于或等于零且小于参数列表的大小 My code OdbcCommand cmd new OdbcCommand SELECT FirstName SecondName Aboutme FROM Us
  • Firebase 归因跟踪

    我在 归因 gt 网络设置 中添加了一些用于归因跟踪的网络 并添加了这些网络 SDK 但如何从 Firebase 中查看来自特定广告网络的转化 例如first open 如果我去归因 gt 点击first open gt 然后尝试应用过滤器
  • 覆盖使用媒体查询的 MuiTab 等组件

    我正在尝试为 MuiTab 提供 CSS 覆盖以增加字体大小 使用有关material ui上的CSS覆盖的文档 我已经设法增加了大多数元素的字体大小 但是我陷入了使用媒体查询的元素 因为它们产生比我通过覆盖提供的规则更具体的CSS规则 主