Framer-motion 覆盖 react-bootstrap答案

【问题标题】：Framer-motion overriding react-bootstrapFramer-motion 覆盖 react-bootstrap
【发布时间】：2020-12-18 11:30:21
【问题描述】：

我正在构建一个使用 gatsby/react/react-bootstrap/framer-motion 的网站。我遇到了 framer-motion 覆盖我的 react-bootstrap css 的问题？我宁愿不将所有响应重新设计回这些元素，并且想知道是否有办法让这两个库相互配合？试图让 framer-motion 做出响应似乎让人头疼……我可能只是针对不同的视口进行设计，但 idk。

这是我的代码：

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

这是我的 CSS：


@import "~bootstrap/scss/bootstrap";

body {
  background-color: black;
}

.nav-item {
  padding-left: 20px;
  padding-right: 20px;
}

.nav-item a {
  text-decoration: none;
  letter-spacing: 5px;
  font-weight: 300;
  font-size: 12px;
  color: white;
}

.nav-item a:hover {
  text-decoration: none;
  color: #64a0c2;
}

.carousel-item {
  background-color: blue;
  width: 400px;
  height: 400px;
}

button.navbar-toggler {
  justify-content: center;
}

.header-image {
  object-fit: cover;
  display: inline-block;
  min-width: 100%;
  min-height: 100%;
  width: 120%;
  height: 120%;
  position: fixed;
  top: 0;
  z-index: -4;
}

.cclogo {
  position: relative;
  top: 50%;
  left: 50%;
z-index: 2;

}

p, h1, h2, h3, h4, li {
  color: white;
}

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

【问题讨论】：

标签： reactjs bootstrap-4 gatsby react-bootstrap framer-motion

【解决方案1】：

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

<img as={motion.img}>

【讨论】：

【解决方案2】：

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。

【讨论】：