如何在StyleX中为body元素设置样式？

要给位于React组件外的body元素设置StyleX样式，可以结合useEffect和StyleX的inject API来实现，具体步骤如下：

• 首先用StyleX定义body需要的样式规则：

import stylex from '@stylexjs/stylex';

const bodyStyles = stylex.create({
  base: {
    margin: 0,
    padding: 0,
    backgroundColor: '#f5f5f5',
    fontFamily: 'system-ui, -apple-system, sans-serif',
  },
});

• 在你的根React组件中，使用useEffect来注入样式并给body添加对应的className：

import { useEffect } from 'react';
import stylex from '@stylexjs/stylex';

function AppRoot() {
  useEffect(() => {
    // 注入样式并获取生成的className
    const bodyClass = stylex.inject(bodyStyles.base);
    // 将className添加到body元素
    document.body.classList.add(bodyClass);

    // 组件卸载时清理样式，避免残留
    return () => {
      document.body.classList.remove(bodyClass);
    };
  }, []);

  return (
    {/* 应用的根内容 */}
    <div>你的应用组件内容</div>
  );
}

补充说明 #

• stylex.inject()方法会将StyleX样式转换为浏览器可识别的CSS类名并返回，我们直接将这个类名添加到body上即可生效。
• 依赖项传空数组[]确保这个逻辑只在组件挂载时执行一次，卸载时执行清理操作。

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