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

Question

据我了解，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() 解决它，但它不是“遗留”的，上面屏幕截图中显示的语法对我来说更有吸引力。

Answer 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>