将渐变应用于 Material UI 的主题背景

2024-05-17

我试图将 MuiTheme 的默认背景颜色设置为渐变,我有以下代码:

export const theme = createMuiTheme({
  palette: {
    type: "dark",
    background: {
      default: "linear-gradient(45deg, #fe6b8b 30%, #ff8e53 90%)",
    },
  },
})

但是我注意到material-ui将其设置为background-color并且那里不允许使用渐变。
有没有办法绕过这个并让它变成background反而?


如果您使用的是MUI版本“^5.8.7”, 那么下面应该可以工作

import {
  createTheme
} from '@mui/material/styles';

const theme = createTheme({
  components: {
    MuiCssBaseline: {
      styleOverrides: {
        body: {
          backgroundColor: #FAACA8,
          backgroundImage: `linear-gradient(19deg, #FAACA8 0%, #DDD6F3 100%)`,
        },
      },
    },
  }
})
<script src="https://unpkg.com/@mui/material@latest/umd/material-ui.development.js"></script>
本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系:hwhale#tublm.com(使用前将#替换为@)

将渐变应用于 Material UI 的主题背景 的相关文章

随机推荐

  • django AuditTrail 与还原

    我正在开发一个新的网络应用程序 我需要将数据库中的任何更改存储到审核表中 此类审计表的目的是 稍后在真正的物理审计中 我们可以确定在某种情况下发生了什么 谁编辑了什么以及数据库当时的状态是什么 复杂的计算 所以大多数审计表将被写入而不是读取
  • 如何将 int[] 转换为 uint8[]

    所以 我需要你的帮助 我找不到关于该主题的任何内容 Golang 是一门刚刚诞生的语言 所以对于像我这样的新手来说很难快速找到答案 预先声明的 Goint类型大小是特定于实现的 32 位或 64 位 数字类型 http golang org
  • AppCompat v21 工具栏更改徽标大小

    我正在从以前的操作栏迁移到 appcompat v21 中的新工具栏功能 我仍然想将徽标保留在操作栏 工具栏 的左上角 为此 我在布局中添加了支持工具栏 并为其创建了一个新的工具栏 app theme style NewToolBarSty
  • 如何重新定位或移动 Google Maps SDK 上的当前位置按钮?

    如何将 Objective C 中的当前位置按钮移至我的偏好 现在 我已启用它 但底角有东西挡住了它 Thanks 您可以使用 padding 将按钮向上移动 self mapView padding UIEdgeInsets top 0
  • 使用 posix shell 测试字符串中的正则表达式

    如何测试字符串是否与特定字符串匹配正则表达式与基本 无 bash 或任何其他 posix shell 脚本 在 if 语句中 您可以使用expr在 POSIX shell 中计算正则表达式的命令 s Abc expr s alpha 3 e
  • 如何确定 std::function 的参数数量?

    我有以下问题 假设您想编写一个可以采用 lambda 表达式的通用函数 我知道如果参数是 std function 类型 那么我不仅可以使用 lambda 还可以使用函数 甚至可以使用函数指针 所以第一步 我做了以下事情 void prin
  • 工厂模式中创建者的角色

    我无法理解为工厂类定义抽象类 接口的作用 这是我在网络上的所有教程中总是看到的东西 有人可以阐明 CreatorInterface 的重要性吗 工厂模式参考UML图 https i stack imgur com 3VpUM png 为了以
  • 在 .NET 程序集或可执行文件中嵌入文本文件[重复]

    这个问题在这里已经有答案了 可能的重复 如何在 NET 程序集中嵌入文本文件 https stackoverflow com questions 433171 how to embed a text file in a net assemb
  • 通过套接字发送动态数组(在记录内)?

    我正在尝试直接使用 SendBuf 将记录从服务器传输到客户端 但是 该记录有一个动态数组的成员 并且我在某处 在 SOF 中 读到 发送记录时 成员必须是静态的 固定长度 但问题是 我无法确定如何我会 将来 发送许多论点 我怎么解决这个问
  • Api 控制器中长时间运行的任务(使用 Web API,自托管 OWIN)

    我想在自托管 OWIN 环境中的 ApiController 中运行长时间运行的任务 例如 4 5 分钟 但是 我想在开始该任务后 一旦开始长时间运行的任务 就发回响应 而不等待它完成 这个长时间运行的任务与 HTTP 无关 并且顺序运行一
  • 如何将表格中的td高度设置为0px?

    我有一个包含几行的 HTML 表 这是动态构建的 全部 tr 有一个 td inside If one td 里面没有 HTML 内容 我希望它是不可见的 如何才能做到这一点 并不是说里面的 HTML 是动态渲染的 我不想使用display
  • Magento --“SQLSTATE[23000]:违反完整性约束..”客户更新

    迁移服务器后 每次尝试更新客户信息时都会出现错误 我正在使用一个客户激活插件 http www magentocommerce com magento connect vinai extension 489 customer activat
  • 如果在 中执行 document.write,为什么 DHTML 行为在 IE8 中不起作用?

    我们有一个 3rd 方 Web 应用程序 可以在 IE6 中运行 但不能在 IE8 中运行 示例代码如下 在IE6中会弹出 message from htc 消息 但在IE8中不会弹出 测试 html
  • 在 FsCheck 中生成唯一字符串

    我需要生成独特的非null用作的字符串Dictionary键 我尝试过类似的事情 public static Gen
  • 如何为 NSAttributedString 内的文本设置“隐藏”属性?

    我有一个 Cocoa 应用程序NSTextView控件将其文本保存在NSAttributedString 实际上我相信这是一个NSMutableAttributedString 我可以轻松地在该字符串内的不同字符范围上设置和修改不同的文本属
  • JPA 中的复合键

    我想创建一个具有自动生成的主键的实体 而且还有一个由其他两个字段组成的唯一复合键 我如何在 JPA 中执行此操作 我想这样做是因为主键应该用作另一个表中的外键 并且使其复合并不好 在下面的代码片段中 我需要命令和模型是唯一的 pk当然是主键
  • Haskell - lambda 表达式

    我试图了解什么是有用的以及如何在 Haskell 中实际使用 lambda 表达式 我不太明白使用 lambda 表达式相对于定义函数的约定方式有何优势 例如 我通常会执行以下操作 let add x y x y 我可以简单地打电话 add
  • Android Studio:lambda 不起作用[重复]

    这个问题在这里已经有答案了 当尝试使用 lambda 表达式时 我遇到了一些 Gradle 构建错误 错误 41 100 错误 source 1 7 不支持 lambda 表达式 使用 source 8 或更高版本来启用 lambda 表达
  • 自动提取数据 - Oracle SQL Developer

    我通过 SQL Developer 连接到 Oracle 数据库 我想编写一个返回每月数据集的查询 然后将该数据提取到分隔文本文件中 我知道如何做到这一点就好了 我想知道是否有一种方法可以编写一个脚本来运行查询并在一年内逐月提取数据 这样我
  • 将渐变应用于 Material UI 的主题背景

    我试图将 MuiTheme 的默认背景颜色设置为渐变 我有以下代码 export const theme createMuiTheme palette type dark background default linear gradient