关于next.js中css样式穿透的问题

react没有vue中v-deep这样的可以直接操作三方组件样式的专用方式。

但是通过摸索，发现可以通过emotion的styled功能重新设计三方组件的样式就行。

尝试解法-emotion-css

期间尝试过emotion的css方法直接赋值到三方组件上，不生效。

// 下面这种方法看似很理想，但是不生效
const SwiperContainer = css`
  position: relative;
  & > .carousel:last-child {
    position: absolute;
    left: 0;
    bottom: 0;
    & > .thumbs-wrapper > .thumbs {
      display: flex;
      justify-content: center;
    }
  }
`;

const Swiper = () => {
  return (
      <Carousel css={SwiperContainer} showIndicators={false} showStatus={false} showArrows={false}>

nextjs的<style jsx>只能在js中生效而且不能用于服务端。

最终解法-emotion-styled

// 这里理解为大概率是react-responsive-carousel和nextjs不兼容导致的
const SwiperContainer = styled(Carousel)`
  position: relative;
  & > .carousel:last-child {
    position: absolute;
    left: 0;
    bottom: 0;
    & > .thumbs-wrapper > .thumbs {
      display: flex;
      justify-content: center;
    }
  }
`;

const Swiper = () => {
  return (
      <SwiperContainer showIndicators={false} showStatus={false} showArrows={false}>
        <div>
          // 这里虽然想使用nextjs组件Image，但是和Carousel不兼容，无法显示缩略图
          <img src="/imgs/img1.png" />
        </div>
        <div>
          <img src="/imgs/img2.png" />
        </div>
        <div>
          <img src="/imgs/img3.png" />
        </div>
      </SwiperContainer>
  );
};

展示效果

需要将底部的缩略图移到靠近底部中间位置。

// 非要使用image，只能自定义缩略图
const images = ["/imgs/img1.png", "/imgs/img2.png", "/imgs/img3.png"];

const Swiper = () => {
  // 自定义缩略图
  const renderThumbs = () =>
    images.map((img, idx) => (
      <div key={idx}>
        <Image
          src={img}
          alt="logo"
          width={80}
          height={30}
          style={{
            objectFit: "contain",
          }}
        />
      </div>
    ));

  return (
    <SwiperContainer
      showIndicators={false}
      showStatus={false}
      showArrows={false}
      renderThumbs={renderThumbs}
    >
      <div>
        <Image
          src="/imgs/img1.png"
          alt="image1"
          width={1920}
          height={1200}
          style={{
            maxWidth: "100%",
            height: "700px",
            objectFit: "cover",
            objectPosition: "50% 20%",
          }}
        />
      </div>
      <div>
        <Image
          src="/imgs/img2.png"
          alt="image1"
          width={1920}
          height={1200}
          style={{
            maxWidth: "100%",
            height: "700px",
            objectFit: "cover",
            objectPosition: "50% 50%",
          }}
        />
      </div>
      <div>
        <Image
          src="/imgs/img3.png"
          alt="image1"
          width={1920}
          height={1200}
          style={{
            maxWidth: "100%",
            height: "700px",
            objectFit: "cover",
            objectPosition: "50% 50%",
          }}
        />
      </div>
    </SwiperContainer>
  );
};