小编Dou*_*que的帖子

我已经安装SwiperJS到我的NextJS项目中了。我完全遵循了 Swiper 教程文档，但是当我尝试对诸如.swiper, .swiper-slide... 之类的类进行样式设计时，出现了一个问题，这些样式没有响应我的自定义样式。

就我而言，我的滑块是一个组件，并且有一个名为Sliderfileindex.tsx和 的文件夹slider.module.scss。

我的索引.tsx：

import Image from 'next/image';
import { Swiper, SwiperSlide } from 'swiper/react';
import { Navigation, Pagination, Scrollbar } from 'swiper';

import styles from './slider.module.scss'

import 'swiper/css';
import 'swiper/css/navigation';
import 'swiper/css/pagination';

export function SliderPortfolio() {
  return (
    <div className={styles.teste}>
      <Swiper
        className={styles.mySwiper}
        modules={[Navigation, Pagination, Scrollbar]}
        spaceBetween={50}
        slidesPerView={3}
        navigation
        pagination={{ clickable: true }}
        scrollbar={{ draggable: true }}
      >
        <SwiperSlide>
          <div className={styles.imageContainerNext}>
            <Image
              className={styles.imageNext} …

如何使用 Chakra UI 在页面加载时显示模式框？

我试图在 Chakra 的文档中找到此信息，但没有成功。

import {
    useDisclosure,
    Modal,
    ModalOverlay,
    ModalContent,
    ModalCloseButton,
    ModalBody,
    Text,
} from "@chakra-ui/react"
            
export default function BasicUsage() {
    const { isOpen, onClose } = useDisclosure()
    
    return (
        <>
            <Modal isOpen={isOpen} onClose={onClose}>
                <ModalOverlay />
                <ModalContent>
                    <ModalCloseButton />
                    <ModalBody>
                        <Text>Hello</Text>
                    </ModalBody>
                </ModalContent>
            </Modal>
        </>
    )
}