如何在MUI中为Swiper的活跃/前后幻灯片设置样式？

方案一：用MUI styled 封装Swiper组件 #

因为Swiper不是MUI原生组件，直接用sx的嵌套选择器不生效，但可以通过MUI的styled函数把Swiper包装成可样式化的组件，这样就能用MUI的样式语法控制幻灯片状态：

import { styled } from '@mui/material/styles';
import Swiper from 'swiper/react';

const StyledSwiper = styled(Swiper)(({ theme }) => ({
  '& .swiper-slide': {
    transition: 'opacity 0.3s ease',
  },
  '& .swiper-slide-active': {
    opacity: 1, // 活跃幻灯片完全显示
  },
  '& .swiper-slide-prev, & .swiper-slide-next': {
    opacity: 0.1, // 上下幻灯片透明度10%
  },
  // 保留你之前的分页样式变量
  '--swiper-pagination-color': 'red',
  '--swiper-pagination-bullet-inactive-color': 'black',
  '--swiper-pagination-bullet-inactive-opacity': '1',
}));

// 使用时直接替换原Swiper组件
<StyledSwiper
  slidesPerView={1}
  navigation
  pagination={{ clickable: true }}
>
  {/* 幻灯片内容 */}
</StyledSwiper>

方案二：在MUI主题中全局配置Swiper样式 #

如果想在主题层面统一配置Swiper样式，可以在createTheme的components中添加全局样式，针对Swiper的类名设置：

import { createTheme, ThemeProvider } from '@mui/material/styles';

const theme = createTheme({
  components: {
    MuiCssBaseline: {
      styleOverrides: {
        '.swiper': {
          '--swiper-pagination-color': 'red',
          '--swiper-pagination-bullet-inactive-color': 'black',
          '--swiper-pagination-bullet-inactive-opacity': '1',
        },
        '.swiper-slide-active': {
          opacity: 1,
        },
        '.swiper-slide-prev, .swiper-slide-next': {
          opacity: 0.1,
        },
      },
    },
  },
});

// 在根组件包裹ThemeProvider
<ThemeProvider theme={theme}>
  {/* 应用内容 */}
</ThemeProvider>

关于Creative Effect不生效的问题 #

你需要确保导入了Creative Effect对应的模块和CSS文件：

import { CreativeEffect } from 'swiper/modules';
import 'swiper/css/creative';

// 在Swiper组件中配置
<Swiper
  modules={[CreativeEffect]}
  effect="creative"
  creativeEffect={{
    prev: { opacity: 0.1 },
    next: { opacity: 0.1 },
  }}
>
  {/* 幻灯片内容 */}
</Swiper>

为什么--swiper-slide-active-opacity不生效？ #

Swiper官方并未提供--swiper-slide-active-opacity这个内置CSS变量，你之前用的分页变量是Swiper原生支持的，但幻灯片状态的样式需要通过类选择器直接覆盖，这是该变量无效的核心原因。

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