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功能（如情感文档中所示）可以帮助我解决这个问题。

例如：

import { css, cx } from '@emotion/css'

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

我想我可以解决它，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>