Question

问题是我在我的反应应用程序中使用了几个 reactSlick 组件，在家里，其他在团队页面中，我已经在 globall.css (nextjs) 中为主页自定义，现在我想更改名为 {{1 }} 在锦标赛页面中，一些如何使用 .slick-list

自动生成

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

我的代码如下：

<Slider></Slider>

Answer 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} alt="slider" key={index} />
          </div>
        );
      })}
    </Slider>
  );
};

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

1 个答案: