程序员经验分享-hwhale

@mui/material/styles 和 @mui/styles 之间的区别？

2023-12-20

在 Material-UI v5 中，一些 API 使用是从@mui/material/styles, like useTheme。一些API的使用是从导入的@mui/styles, like makeStyles。我可以只使用一个库中的那些与样式相关的 API吗？@mui/styles or @mui/material/styles？因为，在 Material-UI v4 中，我导入了所有与样式相关的 API'@material-ui/core/styles' or 'material-ui/styles'.


通常在 v4 中，您可以从以下位置导入样式 API@material-ui/core/styles。这个在幕后使用 JSS：

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

在 v5 中，他们品牌名称更改为MUI https://github.com/mui-org/material-ui/issues/27666。结果，包名也发生了变化：

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

但 MUI v5 也放弃了对 JSS 的支持（makeStyles/withStyles正在使用），因此他们将这些 API 移动到一个名为@mui/styles。 （他们计划在 v6 中删除这个 API，但有一些阻力。请参阅this https://github.com/mui-org/material-ui/issues/26571问题以获取更多信息）

import { makeStyles } from '@mui/styles';

并鼓励用户采用更新的造型解决方案（sx, styled）使用情感作为默认样式引擎：

import { styled } from "@mui/material/styles";

综上所述，两者之间的区别@mui/material/styles and @mui/styles就是它：

@mui/styles https://mui.com/styles/basics/#main-content @mui/material/styles
Doesn't come with a default theme, need createTheme / ThemeProvider Come with a default material theme (as opposed to the other planned theme https://github.com/mui-org/material-ui/issues/27825#issuecomment-921377969)
Legacy styling package Depends on the new @mui/system https://mui.com/system/basics/#main-content package
Powered by JSS Powered by emotion (as a default style engine)
Has makeStyles/withStyles Doesn't have makeStyles/withStyles, has styled instead

你不应该混合@mui/styles with @mui/material/styles。选择一种样式解决方案并坚持使用它，因为来自不同样式库的重复类名可能会导致意外的副作用和难以发现的错误。如果您正在创建一个新项目或有一个小型 v4 项目，我建议完全迁移到情感解决方案，以避免添加额外的包大小，因为 MUI 组件在新版本中不再使用情感，而不是 JSS。

参考

  • https://mui.com/styles/basics/#main-content https://mui.com/styles/basics/#main-content
  • https://mui.com/guides/migration-v4/#heading-mui-material-styles https://mui.com/guides/migration-v4/#heading-mui-material-styles
本文内容由网友自发贡献，版权归原作者所有，本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容，请联系:hwhale#tublm.com(使用前将#替换为@)

ReactJS

materialui

@mui/material/styles 和 @mui/styles 之间的区别？ 的相关文章

  • 使 Material UI Grid 项目的子项拉伸以适合父容器的剩余高度

    1 现状 我有一个包含 4 个网格项的 Material UI 网格容器 每个 Grid 项中都有一个 Typography 组件 其中包含标题和包含一些内容的 Card 如下所示 2 期望的外观 我希望卡片填充网格项目的剩余高度并且不超过

  • ReactCSSTransitionGroup 组件WillLeave 未调用

    我尝试使用 ReactCssTransition 但不知何故该事件没有被调用 componentWillLeave 这是我的组件 import React Component from react import TransitionGrou

  • 类型“void”不可分配给类型“((event:MouseEvent) => void) |不明确的'

    import as React from react import App css import PageTwo from components PageTwo export interface IPropsk data Array

  • ReactJs 警告：不推荐使用改变“style”。考虑事先克隆它

    我收到以下警告 inWarning div was passed a style object that has previously been mutated Mutating style is deprecated Consider c

  • 使用 React.forwardRef 与自定义 ref prop 的价值

    我看到React forwardRef从反应文档来看 似乎是将引用传递给子功能组件的认可方式 const FancyButton React forwardRef props ref gt

  • 如何使用draft.js更改光标位置？

    我想知道在键盘命令上完成文本插入后如何更改 Draft js 中的光标位置 因此我目前正在使用 handleKeyCommand cmd 每当用户按下特定按钮时插入自定义文本块 接下来我尝试了以下操作 currentState this s

  • 可下载文件 - 盖茨比

    由于某种原因 尝试下载文件时失败 我尝试了几种不同的方法 但都失败了 我读过一些关于 pdf word 文件在盖茨比中被 禁止 的内容 默认 a href route to file a 好像不行 显示下载失败 任何帮助表示赞赏 See 将

  • React PropTypes 与 Flow

    PropTypes 和 Flow 涵盖相似的内容 但使用不同的方法 PropTypes 可以在运行时向您发出警告 这有助于快速找到来自服务器等的格式错误的响应 但是 Flow 似乎是未来 并且具有泛型等概念 是一个非常灵活的解决方案 Nuc

  • Redux-saga 从操作中获取数据返回patternOrChannel 未定义

    我需要将动态数据从屏幕发送到操作 减速器 并使用该数据从 API 获取数据 但是当我在我的rootSaga我会收到这样的错误 在检查 take patternOrChannel 时未捕获 patternOrChannel 未定义未捕获在 r

  • 需要有关 React Js 的帮助

    我是 React Js 新手 我的代码无法正常工作 请看下面 这是我的脚本文件Main jsx 该文件由 React 编译 输出放置在 dist 文件夹下的 main js 文件中 var react require react react

  • useLocation 挂钩 - 确定过去的位置

    根据 React Router 5 1文档 https v5 reactrouter com web api location应该可以看到 应用程序现在在哪里 你想让它去哪里 甚至它曾经在哪里 在我的应用程序中 我需要查看 它在哪里 我访问

  • 在vscode中使用reactjs报错

    在 Visual Studio 代码中使用 jsx 语法 Visual Studio代码报错 请帮我 谢谢 符号 例如 而不是这样做 return lt button className square gt TODO lt button g

  • Flux + React.js - 操作中的回调是好还是坏？

    让我解释一下我最近遇到的问题 我有 React js Flux 驱动的应用程序 有一个列表显示文章数量 注意 应用程序中有多个不同的列表 和文章详情查看在里面 但每个列表只有一个 API 端点 它返回文章数组 为了显示我需要的详细信息fin

  • 如何获取使用 .map 渲染的第一个元素的 ref？

    我需要在几行中显示视频 卡片 的缩略图 并重点关注第一个缩略图 我使用嵌套地图进行了显示 该代码基本上迭代视频数组并返回多行视频 我们如何关注第一个渲染的元素 我认为我们需要获得第一个要聚焦的元素的引用 但是我们如何在这里设置 ref 并在

  • 内容丰富的 api markdown 转换为 HTML

    有没有什么简单的方法可以将 Markdown 文本从 Contentful api 转换为 html 代码以显示在 html 页面上 我尝试过使用 pagedown 和一些类似的技术 但似乎没有一个对我有用 我是 Contentful 的客

  • React-Router v5 History.push 不触发组件

    很抱歉朋友们又问这个问题了 我找到了解决这个问题的几个方法 但他们让我很困惑 我只是想问一个优雅的方法来做到这一点 正如你通过标题所理解的 我有一个关于反应路由的问题 让我解释 我有一个按钮 其名称是Login 单击按钮后 我执行了一些逻辑

  • React Context - Context.Consumer 与 Class.contextType

    我正在学习新引入的 React Context API 但我注意到它在示例中的消耗存在一些不一致 有的还是用原来的上下文 消费者HOC 方法 而有些 包括 React 文档 使用静态类 contextType method 有什么区别以及为

  • 如何通过比较React中同一数组中的Id和reference_id来重新排序数组列表

    这是我得到的数组 id 1 name hello world reference id null id 2 name hello world reference id null id 3 name hello world reference

  • 如何在 React JS 中根据键创建动态表？

    我正在尝试在 React JS 中创建一个动态表组件 该组件当前只有一个静态标头 其中包括最常见的结果键 有些结果还包含更多信息 例如电话号码 学位 如何根据键 值的存在动态地使用附加列扩展表 我应该与state并在存在时使其可见 或者我应

  • 从 Flask 运行 NPM 构建

    我有一个 React 前端 我想在与我的 python 后端 API 相同的源上提供服务 我正在尝试使用 Flask 来实现此目的 但我遇到了 Flask 找不到我的静态文件的问题 我的前端构建是用生成的npm run build in s

随机推荐

热门标签