如何访问Gatsby项目中预构建Swiper组件的内置CSS类swiper-cube-shadow

方案1：自定义Swiper类名+相邻兄弟选择器 #

因为swiper-cube-shadow是Swiper容器的同级相邻元素，你可以先给Swiper组件添加自定义类名，再通过相邻兄弟选择器选中阴影元素：
给Swiper添加自定义类：

<Swiper 
  className="custom-cube-swiper"
  effect="cube"
  cubeEffect={{
    shadow: true
  }}
  css={css`
    /* 原有Swiper样式 */
  `}
>
  <SwiperSlide css={css`/* 原有滑块样式 */`}>
    <Dado2/>
  </SwiperSlide>
</Swiper>

添加样式，如果使用CSS-in-JS方案（比如Emotion），通过全局样式声明：

import { Global, css } from '@emotion/react'

// 插入到组件JSX中即可
<Global
  styles={css`
    .custom-cube-swiper + .swiper-cube-shadow::before {
      background: red;
      /* 可自行调整透明度、模糊度等属性 */
      opacity: 0.8;
    }
  `}
/>

如果使用全局CSS文件，直接写入样式即可，优先级不够时可添加!important提升权重。

方案2：通过Swiper内置参数自定义阴影类 #

Swiper的Cube特效支持直接配置阴影元素的自定义类名，无需手动选择DOM：

<Swiper
  effect="cube"
  cubeEffect={{
    shadow: true,
    // 传入自定义阴影类名
    shadowClass: "custom-cube-shadow"
  }}
>
  <SwiperSlide>
    <Dado2/>
  </SwiperSlide>
</Swiper>

直接写自定义类的样式即可：

.custom-cube-shadow::before {
  background: red;
}

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