我正在构建一个使用 gatsby/react/react-bootstrap/framer-motion 的网站。我遇到了framer-motion 覆盖我的react-bootstrap 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
这是我的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;
}
非常感谢任何帮助!!!!
尝试将 Motion 标签引用为 prop,并使用常规 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”中的某些元素无法正常工作,例如看看这个示例。
这个问题的解决方案是不使用react-bootstrap组件,而是使用普通的html组件并将bootstrap样式传递给它们。
例如:
而不是做:
<motion.Button>Click Me</motion.Button>
这样做:
<motion.button className="btn btn-primary">Click Me</motion.button>
现在普通的 html 按钮的样式将类似于react-bootstrap Button,我们可以轻松地使用 Framer 动作。