成帧器运动覆盖react-bootstrap

问题描述

我正在建立一个使用gatsby / react / react-bootstrap / framer-motion的网站。我有一个成帧器运动覆盖我的react-bootstrap CSS问题？我不想将所有响应方式重新设置为这些元素，并且想知道是否有办法使这两个库相互配合？试图让成帧器动作做出响应似乎很头疼...我可能只是为idk设计了其他视口。

这是我的代码：

var result = await dbContext
    .Set<Camp>()
    .ProjectTo<CampDto>(mapper.ConfigurationProvider)
    .ToListAsync();

这里是我的CSS：

import React from "react";
import 'bootstrap/dist/css/bootstrap.min.css';
import './styles.scss';
import { Image,Container,Row } from 'react-bootstrap';
import CamcoNavbar from '../components/camconavbar.js';
import BackgroundImage from '../../static/Untitled-1.jpg';
import CClogo from '../../static/CamCo(white).png'
import { motion } from 'framer-motion';

const Home = () => {
  return (
    <div>
      <CamcoNavbar />

      <Container>
        <motion.img className="cclogo" key={CClogo} src={CClogo} initial={{opacity: 0}} animate={{opacity: 1}} transition={{duration: 3}}/>
      </Container>

      
      <motion.img className="header-image" key={BackgroundImage} src={BackgroundImage} initial={{x: -250}} animate={{x: 1000}} transition={{duration: 60,repeat: Infinity}}/>



    </div>
  )
}

export default Home

任何帮助都非常感谢！！！

解决方法

尝试将Motion标签作为道具引用，并使用常规的html标签：

<img as={motion.img}>

,

Framer 不会覆盖 css 样式。

你需要npm i framer-motion和npm i react-bootstrap。

这些库都不会覆盖全局样式。问题隐藏在您的自定义 css

注意您在 import 中使用的是哪个组件。

示例：如果可以使用“容器”css 类，为什么要从 react bootstrap 导入 { Image,Container,Row } ？您只需要从“react-bootstrap”导入 bootstrap.css 并使用 css 而不是常量。

附言“react-bootstrap”中的某些元素无法正常工作，例如查看 this example。