在 React slick 滑块中编辑 slick-list class

Question

问题是我在家里的 React 应用程序中使用了几个 reactSlick 组件，其他组件在团队页面中，我已经在 globall.css (nextjs) 中自定义了主页，现在我想更改 classes 在比赛页面中命名为 .slick-list 一些如何使用 <Slider></Slider>

自动生成的

是否有任何解决方案可以更改 class css，而其他页面不包含在其中？我想内联广告 css 但我找不到任何关于 .slick-list 的解释来编辑它，而不是在 global.css

中

我的代码如下：

    <Slider {...settings}>
  {sliderData.map((slide, index) => {
    return (
      <div
        className='TeamSlider'
        key={index}
        style={{ height: '185px !important' }}
      >
        <img src={slide.image} alt='slider' key={index} />
      </div>
    )
  })}
</Slider>

Answer 1

首先，不建议在global.css文件中写入组件特定css。如果您熟悉 react-jss 或 styled-component，那么您可以轻松做到。我们的想法是使用 class-select 或方式为滑块组件和 select 内部人员 class 提供一个 class 名称。

我将尝试向您展示如何使用 react-jss。

import { createUseStyles } from "react-jss";

const useStyles = createUseStyles({
  sliderContainer: {
    "& .slick-list": {
      marginTop: "100px",
    },
  },
});

export const SomeComponent = () => {
  const classes = useStyles();
  const settings = {
    className: classes.sliderContainer,
  };
  return (
    <Slider {...settings}>
      {sliderData.map((slide, index) => {
        return (
          <div
            className="TeamSlider"
            key={index}
            style={{ height: "185px !important" }}
          >
            <img src={slide.image} alt="slider" key={index} />
          </div>
        );
      })}
    </Slider>
  );
};

在 React slick 滑块中编辑 slick-list class

editing slick-list class in react slick slider

reactjs

react-slick

next.js