MUI 5中是否有类似于情感“css”功能的功能？

tzdcorbm 于 2022-12-01 发布在其他

关注(0)|答案(2)|浏览(175)

据我所知，MUI 5在设计样式时使用了情感，情感有一个很好的助手函数css，它看起来像返回一个字符串-一个类名，您可以将其用作className或 * 任何其他 * 属性的值。

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

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

我找遍了所有地方，但在MUI中找不到可用的模拟。系统和样式引擎中有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()来解决它，但它是“遗留”的，上面截图中显示的语法对我来说更有吸引力。

css

来源：https://stackoverflow.com/questions/69262127/is-there-an-analog-of-emotions-css-function-in-mui-5

2条答案

按热度按时间

kyks70gy1#

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

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

或者使用styled：
第一次

赞(0）回复(0）举报 2022-12-01

uqcuzwp82#

import { ClassNames } from '@emotion/react';

export const Component = ({ className, sx, ...rest }) => (
  <ClassNames>
    {({ css, cx }) => (
      <div className={cx(className, css(sx))} {...rest} /> 
    )}
  </ClassNames>
);

用法如下：

<Component sx={{ color: "green" }} className="someClass">text</Component>

您还可以将className Package 到css（）中：

<div className={cx(css(className), css(sx))} {...rest} />

赞(0）回复(0）举报 2022-12-01

我来回答

MUI 5中是否有类似于情感“css”功能的功能？

2条答案

相关问题

热门标签

最新问答