如何为MUI Stack内的多个Box统一设置CSS类或主题样式？

当然可以，以下是几种实用的实现方式：

方法1：通过Stack的sx属性使用后代选择器 #

直接在Stack的sx属性中编写CSS后代选择器，精准选中Stack下的所有直接子Box组件：

import Stack from '@mui/material/Stack';
import Box from '@mui/material/Box';

export default function Demo() {
  return (
    <Stack
      sx={{
        '& > Box': {
          padding: 2,
          border: '1px solid #ccc',
          borderRadius: 1,
          backgroundColor: '#f5f5f5',
        },
      }}
    >
      <Box>Box 1</Box>
      <Box>Box 2</Box>
      <Box>Box 3</Box>
    </Stack>
  );
}

注：& > Box选择器仅作用于Stack的直接子元素，不会影响嵌套在Box内部的其他Box组件。

方法2：创建带样式的自定义Stack组件 #

使用MUI的styled API封装一个预设样式的Stack组件，适合需要重复使用该样式组合的场景：

import { styled } from '@mui/material/styles';
import Stack from '@mui/material/Stack';
import Box from '@mui/material/Box';

const StyledStack = styled(Stack)(({ theme }) => ({
  '& > Box': {
    padding: theme.spacing(2),
    border: `1px solid ${theme.palette.divider}`,
    borderRadius: theme.shape.borderRadius,
    backgroundColor: theme.palette.grey[100],
  },
}));

export default function Demo() {
  return (
    <StyledStack>
      <Box>Box 1</Box>
      <Box>Box 2</Box>
      <Box>Box 3</Box>
    </StyledStack>
  );
}

方法3：创建统一样式的自定义Box组件 #

如果需要在多个容器（不止当前Stack）中复用相同样式的Box，可以直接封装一个带样式的Box组件：

import { styled } from '@mui/material/styles';
import Box from '@mui/material/Box';
import Stack from '@mui/material/Stack';

const StyledBox = styled(Box)(({ theme }) => ({
  padding: theme.spacing(2),
  border: `1px solid ${theme.palette.divider}`,
  borderRadius: theme.shape.borderRadius,
  backgroundColor: theme.palette.grey[100],
}));

export default function Demo() {
  return (
    <Stack>
      <StyledBox>Box 1</StyledBox>
      <StyledBox>Box 2</StyledBox>
      <StyledBox>Box 3</StyledBox>
    </Stack>
  );
}

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