Emotion中如何使用@规则？是否支持@property？

Emotion完全支持@property规则，你当前的代码问题在于**@property的定义位置不对**——你把它写在了styled组件外部，Emotion不会识别这个全局位置的CSS规则。

修正方案1：在styled组件内部定义@property #

把@property直接放在styled.div的样式块中，Emotion会正确处理这个规则：

import styled from '@emotion/styled';
import React from 'react';
import demo from './demo_img.jpeg';

const ComponentMaskImage = () => {
  return <MaskImage src={demo} />;
};
export default ComponentMaskImage;

const MaskImage = styled.div`
  /* 将@property定义在组件样式内部 */
  @property --m-0 {
    syntax: '<number>';
    initial-value: 1;
    inherits: false;
  }

  width: 300px;
  height: 300px;
  background: url(${(props) => props.src});
  mask: linear-gradient(
    90deg,
    rgba(0, 0, 0, var(--m-0)),
    rgba(0, 0, 0, var(--m-0))
  );
  transition: --m-0 0.5s;
  &:hover {
    --m-0: 0;
  }
`;

修正方案2：用Global样式定义全局@property #

如果需要多个组件共享这个自定义属性，可以用Emotion的Global组件定义全局的@property：

import styled from '@emotion/styled';
import { Global, css } from '@emotion/react';
import React from 'react';
import demo from './demo_img.jpeg';

const ComponentMaskImage = () => {
  return (
    <>
      <Global
        styles={css`
          @property --m-0 {
            syntax: '<number>';
            initial-value: 1;
            inherits: false;
          }
        `}
      />
      <MaskImage src={demo} />
    </>
  );
};
export default ComponentMaskImage;

const MaskImage = styled.div`
  width: 300px;
  height: 300px;
  background: url(${(props) => props.src});
  mask: linear-gradient(
    90deg,
    rgba(0, 0, 0, var(--m-0)),
    rgba(0, 0, 0, var(--m-0))
  );
  transition: --m-0 0.5s;
  &:hover {
    --m-0: 0;
  }
`;

补充说明 #

• Emotion对所有标准CSS规则（包括@property这类CSS Houdini特性）都提供支持，只要写法符合Emotion的样式组织逻辑即可。
• 注意@property的浏览器兼容性：Chrome/Edge 85+原生支持，Firefox需要开启layout.css.properties-and-values.enabled实验特性，Safari 15.4+支持。

内容的提问来源于stack exchange，提问作者joey