无法使用伪类时，如何为MUI自定义组件定位首尾子元素？

核心问题回顾 #

• Emotion在SSR场景下禁止使用:first-child/:last-child，提示替换为:first-of-type，但子元素类型不一致时该伪类无法生效
• 遍历React子组件时，无法穿透封装的子组件获取其内部最终渲染的DOM元素

方案一：DOM操作+CSS变量（通用解决方案） #

直接操作真实DOM获取首尾元素，通过CSS变量传递样式标记，完全不受子组件封装影响：

import { useEffect, useRef } from 'react';
import styled from '@emotion/styled';

// 定义带CSS变量的容器样式
const StyledContainer = styled.div`
  > * {
    /* 默认基础样式 */
    padding: 1rem;
    border-bottom: 1px solid #e0e0e0;
  }

  /* 为首尾元素应用特殊样式 */
  > *[style*="--is-first-child:1"] {
    border-top: 1px solid #e0e0e0;
    background-color: #fafafa;
  }

  > *[style*="--is-last-child:1"] {
    border-bottom: none;
    background-color: #f5f5f5;
  }
`;

const SmartContainer = ({ children }) => {
  const containerRef = useRef(null);

  useEffect(() => {
    const container = containerRef.current;
    if (!container) return;

    // 获取容器内所有真实DOM元素（排除文本节点等）
    const getValidChildren = () => 
      Array.from(container.children).filter(el => el.nodeType === Node.ELEMENT_NODE);

    // 更新首尾元素的CSS变量
    const updateFirstLastStyles = () => {
      const domChildren = getValidChildren();
      if (domChildren.length === 0) return;

      // 先重置所有元素的标记
      domChildren.forEach(el => {
        el.style.removeProperty('--is-first-child');
        el.style.removeProperty('--is-last-child');
      });

      // 给首尾元素设置标记变量
      domChildren[0].style.setProperty('--is-first-child', '1');
      domChildren.at(-1).style.setProperty('--is-last-child', '1');
    };

    // 初始化执行一次
    updateFirstLastStyles();

    // 监听子元素变化，动态更新样式
    const observer = new MutationObserver(updateFirstLastStyles);
    observer.observe(container, { childList: true, subtree: false });

    return () => observer.disconnect();
  }, [children]);

  return <StyledContainer ref={containerRef}>{children}</StyledContainer>;
};

// 使用示例
const Items = () => (
  <>
    <div>文本1</div>
    <p>区块2</p>
    <span>第三个元素</span>
  </>
);

// 调用组件
<SmartContainer>
  <Items />
</SmartContainer>

优势：

• 无需修改子组件，适配所有第三方或封装后的组件
• 自动处理动态新增/删除子元素的场景
• 完全规避SSR伪类安全问题

方案二：子组件协作标记（内部组件库场景） #

如果子组件由自己维护，可以通过传入prop让子组件主动给内部首尾元素添加类名：

// 修改子组件，支持标记首尾元素
const Items = ({ markFirstLast = false }) => {
  const internalItems = [
    <div key="1">文本1</div>,
    <p key="2">区块2</p>,
    <span key="3">第三个元素</span>
  ];

  if (!markFirstLast) return <>{internalItems}</>;

  return (
    <>
      {internalItems.map((item, idx) => {
        const classes = [];
        if (item.props.className) classes.push(item.props.className);
        if (idx === 0) classes.push('first-child');
        if (idx === internalItems.length - 1) classes.push('last-child');
        
        return React.cloneElement(item, { className: classes.join(' ') });
      })}
    </>
  );
};

// 父组件调用时开启标记
<StyledContainer>
  <Items markFirstLast={true} />
</StyledContainer>

// 对应的StyledContainer样式
const StyledContainer = styled.div`
  .first-child {
    border-top: 1px solid #e0e0e0;
    background-color: #fafafa;
  }

  .last-child {
    border-bottom: none;
    background-color: #f5f5f5;
  }
`;

优势：

• 完全在React虚拟DOM层面处理，无DOM操作
• 样式逻辑更清晰

局限性：

• 仅适用于可修改的内部组件，无法处理第三方组件

方案三：扁平化子元素（仅适用于可控子元素场景） #

如果父组件能直接获取所有最终渲染的子元素（比如子组件支持传递children或可拆解），可以先扁平化所有子元素再标记首尾：

import { Children, cloneElement } from 'react';

const FlatContainer = styled.div`
  .first-child { /* 样式 */ }
  .last-child { /* 样式 */ }
`;

const ComponentWithFlatChildren = ({ children }) => {
  // 递归扁平化所有子元素（包括Fragments）
  const flattenChildren = (kids) => {
    return Children.toArray(kids).reduce((acc, child) => {
      if (React.isValidElement(child)) {
        if (child.type === React.Fragment) {
          return [...acc, ...flattenChildren(child.props.children)];
        }
        return [...acc, child];
      }
      return acc;
    }, []);
  };

  const flatKids = flattenChildren(children);

  return (
    <FlatContainer>
      {flatKids.map((kid, idx) => {
        const classes = [];
        if (kid.props.className) classes.push(kid.props.className);
        if (idx === 0) classes.push('first-child');
        if (idx === flatKids.length - 1) classes.push('last-child');
        
        return cloneElement(kid, { className: classes.join(' ') });
      })}
    </FlatContainer>
  );
};

局限性：

• 无法穿透不暴露内部元素的封装组件（比如示例中的Items组件）
• 递归处理可能影响性能，不适用于复杂组件树

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