MUI 5 中是不是有类似 Emotions 'css' 功能的功能？

Posted 2023-03-15

【中文标题】MUI 5 中是不是有类似 Emotions \'css\' 功能的功能？

【英文标题】：Is there an analog of Emotions 'css' function in MUI 5?MUI 5 中是否有类似 Emotions 'css' 功能的功能？

【发布时间】：2021-11-14 14:47:36

【问题描述】：

据我了解，MUI 5 在后台使用 Emotion 进行样式设置，Emotion 有一个很好的辅助函数 css，它看起来像返回一个字符串 - 一个可以用作 className 或 的值的类名任何其他属性。

import  css, cx  from '@emotion/css'

render(
  <div
    className=css`
      padding: 32px;
      background-color: hotpink;
      font-size: 24px;
    `
  >
    Text
  </div>
)

我到处寻找，但在 MUI 中找不到可用的模拟。 system 和 styled-engine 中有 css 函数，但它似乎没有做同样的事情，它返回 SerializedStyles。

我希望使用它的用例如下：

我有一个组件，让您可以为该组件的不同部分传递类名（字符串），从而使您能够更改组件的样式。似乎这个 css 函数（如 Emotion 文档中所示）可以帮助我解决这个问题。

例如：

const headerStyle = css`
  color: blue;
  border-bottom: 1px solid red;
`;

<Component
  headerClassName=headerStyle
  footerClassName=css`
    color: gray;
    font-size: 2rem;
  `
/>

我想我可以用 makeStyles() 解决它，但它不是“遗留”的，上面屏幕截图中显示的语法对我来说更有吸引力。

【问题讨论】：

你有什么不想使用Emotion的css功能的原因吗？

鉴于 MUI已经在使用 Emotion 我希望可以通过 MUI 以某种方式访问​​它（或它的 MUI 包装器），但到目前为止我还没有看到任何方法，这就是问题所在......

@Paul 我不确定您所说的避免额外依赖是什么意思。如果您想使用默认样式引擎，MUI 期望您安装情感（列为peer dependencies）。如果没有 installing 样式库，您将无法使用 MUI 样式 API，例如 sx 或 styled。

@NearHuscarl，看起来为了使所需的css 功能可用，我需要显式安装@emotion/css，样式引擎不需要它。 styled-engine 需要@emotion/react，它确实有css 功能，但它看起来是不同的 功能，这实际上很令人困惑。

是的，我的错，所以css 从@emotion/react 或@emotion/css 导入时返回不同的东西。除非您使用旧的 makeStyles 解决方案，否则 MUI v5 样式 API 似乎不再公开结果类名称。

【参考方案1】：

您可以创建 Component 的包装器并从父组件向下注入样式，如下所示：

<Box sx=
  '& .myHeader': 
    // your header styles
  ,
  '& .myFooter': 
    // your footer styles
  ,
>
  <Component
    headerClassName='myHeader'
    footerClassName='myFooter'
  />
</Box>

或者使用styled:

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

const headerClass = "header";
const footerClass = "footer";

const Container = styled("div")`
  & .$headerClass 
    background-color: red;
  
  & .$footerClass 
    background-color: blue;
  
`;

function Component( headerClassName, footerClassName ) 
  return (
    <div>
      <div className=headerClassName>h</div>
      <div className=footerClassName>f</div>
    </div>
  );

<Container>
  <Component headerClassName=headerClass footerClassName=footerClass />
</Container>

【讨论】：

感谢您的回答近！虽然这应该可以完成工作，但这并不是我喜欢的方法，原因是 1）需要将名称重复两次作为字符串（不是类型/符号安全的方式），而不是将样式分配给一个常量，这将是更好地进行重构。 2）这仍然使用写css的对象样式，这不是我想做的事情，字符串样式（如上所示）是更可取的方式。

@Paul 看到我更新的答案。我想好一点？

我可能和 Paul 处于同样的情况，在这种情况下，@NearHuscarl 的解决方案并没有完全解决这个特定的用例：例如，当在几种不同的元素类型上使用相同的 CSS 定义时，例如作为不同的 SVG 元素，其中 as= 属性变成了一场噩梦。在这种情况下，n=cx(css(...)) 将允许访问 CSS 类名并使用 className 简化事情。

当使用来自@mui/system 的css 时，返回的对象包含一个name 字段。这可以用作 CSS 类名吗？

@TheDiveO 理论上是的，通过连接缓存前缀css-，但我不确定你是否应该这样做，因为除了简单地添加类名之外，情绪在幕后还有一些魔力