在反应光滑滑块中编辑光滑列表类

Posted 2023-02-25

【中文标题】在反应光滑滑块中编辑光滑列表类

【英文标题】：editing slick-list class in react slick slider

【发布时间】：2021-07-03 17:46:34

【问题描述】：

问题是我在我的 react 应用程序中使用了几个 reactSlick 组件，在主页中，其他组件在团队页面中，我已经在 globall.css (nextjs) 中自定义主页，现在我想更改名为 .slick-list 的类在锦标赛页面中，有些是如何使用<Slider></Slider>自动生成的

是否有任何解决方案来更改类 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>

【参考方案1】：

首先，不建议在 global.css 文件中编写组件特定的 css。如果您熟悉 react-jss 或 styled-component，则可以轻松完成。这个想法是给滑块组件一个类名，并使用类选择器的方式选择内部类。

我将尝试向您展示如何使用 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  key=index />
          </div>
        );
      )
    </Slider>
  );
;

【讨论】：

这是，我从朋友那里得到了答案，因为我不知道如何实现 "$ .slick-list" 现在你说清楚了，现在我只在滑块本身中手动添加 className <Slider className=''/> 和将它添加到 global.css 现在我可以使用您的示例进行更改，谢谢