如何基于变量动态设置MUI sx属性中的选择器？

问题根源 #

你当前的代码有两个核心问题：

1. 使用普通变量而非React状态管理n的值：React无法追踪普通变量的变化，即便n更新了，组件也不会触发重渲染，sx属性里的选择器始终是初始渲染时生成的div:nth-child(n+3)，不会同步更新。
2. onClick绑定错误：onClick={handleChange()}会在组件渲染时立即执行handleChange()，而非点击按钮时执行，正确的绑定应该传递函数引用。

解决方案 #

用React的useState替代普通变量来管理需要动态变化的值，这样状态更新时会自动触发组件重渲染，sx属性会重新计算生成新的选择器。

完整代码示例 #

import { useState } from 'react';
import Container from '@mui/material/Container';
import Button from '@mui/material/Button';

const MyComponent = () => {
  // 用state管理"从第几个元素开始隐藏"的数值，初始值对应你原来的3
  const [hideFrom, setHideFrom] = useState(3);

  // 点击按钮更新状态，每次增加1
  const handleShowMore = () => {
    setHideFrom(prev => prev + 1);
  };

  return (
    <Container sx={{
      // 动态生成CSS选择器，hideFrom变化时自动更新
      [`div:nth-child(n+${hideFrom})`]: {
        display: 'none'
      }
    }}>
      <div>div 1</div>
      <div>div 2</div>
      <div>div 3</div>
      <div>div 4</div>
      <div>div 5</div>
      {/* 直接传递函数引用，避免初始渲染时执行 */}
      <Button onClick={handleShowMore}>show more</Button>
    </Container>
  );
};

export default MyComponent;

关键说明 #

• 状态管理：useState是React追踪变量变化的核心方式，只有状态更新才会触发组件重渲染，确保sx属性里的动态选择器能同步更新。
• 函数式更新：使用setHideFrom(prev => prev + 1)而非直接setHideFrom(hideFrom + 1)，能避免依赖当前状态值可能导致的更新异常，尤其在频繁点击时更可靠。
• 选择器生成：模板字符串[div:nth-child(n+${hideFrom})]会在每次重渲染时根据最新的hideFrom值生成新的CSS选择器，MUI的sx属性会自动应用这个新样式。

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