0

我已将 React Awesomeslider 添加到我的项目中，该项目使用 Gatsby.js、Next.js 构建并使用 Sanity.io 作为 CMS。该 css 目前由 post css 配置。

https://github.com/rcaferati/react-awesome-slider

我已经按照文档中的建议链接了普通的 css（因为我没有在这个项目中使用 scss）。

这是我的组件

import PropTypes from "prop-types";
import styles from "./Hero.module.css";
import client from "../../client";
import SimpleBlockContent from "../SimpleBlockContent";
import Cta from "../Cta";
import imageUrlBuilder from "@sanity/image-url";
import AutoplaySlider from "react-awesome-slider";
import AwesomeSliderStyles from "react-awesome-slider/dist/styles.css";
const builder = imageUrlBuilder(client);

function Hero(props) {
  const { heading, image, tagline, ctas } = props;

  const images = props.image;
  return (
    <div className={styles.root}>
      <div className={styles.content}>
        <h1 className={styles.title}>{heading}</h1>
        <div className={styles.tagline}>{tagline && <SimpleBlockContent blocks={tagline} />}</div>
        <AutoplaySlider
          play={true}
          cancelOnInteraction={false}
          interval={6000}
          style={AwesomeSliderStyles}
        >
          <div>
            {images.map((image) => (
              <img
                className={styles.image}
                src={builder.image(image).url()}
                className={styles.image}
                alt={heading}
              />
            ))}
          </div>
        </AutoplaySlider>
      </div>
    </div>
  );
}

Hero.propTypes = {
  heading: PropTypes.string,
  backgroundImage: PropTypes.object,
  tagline: PropTypes.array,
  ctas: PropTypes.arrayOf(PropTypes.object),
};

export default Hero;

一切都显示为导入并且滑块出现在页面上但是我在控制台中显示了这个...

Warning: Unsupported style property awssld__timer--hidden. Did you mean awssld__timer-hidden?

其他 CSS 似乎都没有通过。有没有人遇到过这个？

任何帮助，将不胜感激。

谢谢

4

1 回答 1

0

为了使用外部 CSS 文件，您需要?raw在 CSS 文件路径的末尾添加，如下所示：

import AwesomeSliderStyles from "react-awesome-slider/dist/styles.css?raw";

它记录在这里 https://www.sanity.io/docs/styling#using-external-css-in-sanity-22b29fe9dcd4

于 2020-06-03T12:33:29.413 回答