小编ron*_*tel的帖子

我在 React 中使用 swiper.js 创建了两个滑块。两个滑块的 css 规则不同，并且必须针对库提供的相同 css 类。当我在react中集成这两个组件时，发生了css冲突。我该如何解决这个问题？

例如：第一个组件滑块 css 规则

.swiper-container {
  position: relative;
  width: 100%;
  padding-top: 50px;
  padding-bottom: 150px;
}

第二个组件滑块 CSS 规则

.swiper-container {
  max-width: 500px;
  border-radius: 15px;
  overflow: hidden;
  padding-left: 10px;
  padding-right: 10px;
  margin-bottom: 16px;
  margin-left: 0;
  margin-right: 0;
}

第二个组件 css 规则将覆盖第一个组件 css 规则，我不希望这种情况发生 有什么方法可以解决这个问题吗？

import React, { Fragment } from "react";
import { Swiper, SwiperSlide } from "swiper/react";
import SwiperCore, { EffectCoverflow, Navigation } from "swiper";
import "swiper/swiper-bundle.css";
import "./App.css";
import Party2 from "./Party2.png";

SwiperCore.use([EffectCoverflow, Navigation]);

const slides = [];
for (let i = 0; i < 10; i += 1) {
  slides.push(
    <SwiperSlide key={`slide-${i}`}>
      <img
        className="review-slider-image"
        src={Party2}
        style={{ listStyle: "none" }}
        alt={`Slide ${i}`}
      />
    </SwiperSlide>
  );
}

const App = () => {
  return (
    <Fragment>
      <Swiper
        slidesPerView="3" // or 'auto'
        slidesPerColumn="2"
        slidesPerGroup="3" …

每次从服务器端套接字接收到一个对象时，都必须在DOM中附加一个新的div元素，其中包含一条消息。

而是再次重新覆盖div元素，并且仅生成一个div元素。

  state = {
    chatMessage: ''
  }

  componentDidMount() {
    socket.on('retrieve-chat-left', (data) => {

      var message = data.map(data => {
        console.log(data.name, data.message);
        return <ChatListLeft key={data._id} name={data.name} chatMessage={data.message} />
      });

      this.setState({
        chatMessage: message
      });
    });

  }

  render() {

    return (
      <div className="mainbodybar">
        {this.state.chatMessage}
      </div>
    )
  }

// ChatListLeft component

import React from 'react'

export default function ChatListLeft({ chatMessage, name }) {
  return (
    <div className="retrieve-chat-left">
      {chatMessage}
      {name}
    </div>
  )
}