I am having an issue with the Link component from the react-scroll library. I am trying to achieve a simple hover effect on my navigation links, where they increase in size using transform: scale(1.1). However, this effect is not working. I've tried using normal div elements instead of Link tags and the effect works fine, so I suspect there is something in the react-scroll library that is conflicting.
Here is my code:
JSX:
import React from "react";
import { Link, Element, Events, animateScroll as scroll, scrollSpy, scroller } from "react-scroll";
import "../App.css";
function Navbar() {
return (
<Link
activeClass="active"
to="about"
spy={true}
smooth={true}
offset={-100}
duration={500}
className="navbar-item"
>
Hover over me to make me grow, click me to scroll down
</Link>
);
}
export default Navbar;
CSS:
.navbar-item {
transition: all 0.3s ease;
}
.navbar-item:hover {
transform: scale(1.1);
}
I would appreciate any assistance in resolving this issue. Thank you in advance!
I have checked your code, and even though everything seems to be correct, it wasn't scaling or any other thing related to transforming property on hover. I think this might also be the case with a simple tag. So the solution that I came up with is to put your tag inside another tag and give your "navbar-item" class to that div instead. This way it will work, and you can do whatever you want on hover.
For the record here is where I tried your react component: https://playcode.io/1188754
And here is the live preview for it:
https://1188754.playcode.io/
Let me know if this was helpful or if you found any other solution.
Related
its is very simple problem
so i just copied css from https://github.com/jh3y/whirl/blob/dist/css/building-blocks.css that give loading animation in css and i want it to apply it to my react project
I'm sure I included correctly, but it still doesn't work. and i am just doing like this
<div className="building-blocks" />
but its not working. is there any problem with the css code or can you show me how to do it correctly
its not the classname, it should be animation name, you can name your div class whatever you want!
.building-blocks {
animation: building-blocks;
}
I am building a website using Next and Typescript. I am using the following packages:
Framer-motion for page transitions
Gsap for simpler animations
When I set the images using the following:
<Link>
<div className={`figureContainer ${styles.figureContainer}>
<Image layout="fill" objectFit="contain" src={lockIcon} alt="scx figure" priority={index === 0? true : false } />
<div className={styles.menuTitle}>{item}</div>
</div>
</Link>
and in the CSS the figure container class has the following base style:
.figureContainer{
width: 50%;
height: 100%;
position: relative;
transition: filter 0.4s;
}
When I click a link to go to the store page, on localhost it works perfectly fine but when I deployed it to vercel and tried the same thing at first everything looks like it works but the Images jump to fill the screen when I change routes.
Almost as if I set position: absolute on images and relative on the body with no other intermediary parent being set to relative.
This only happens when I change routes on the vercel app: https://scx-landing-revamp-6eid5catf-tochibedford.vercel.app/ why does this happen? how can it be fixed?
I hope you are doing great, I was facing the same issue (using next/image + FramerMotion) and I fixed it today by abstracting all the content in my pages/index.tsx into a IndexScreen.tsx file and then dynamically importing it using:
import dynamic from 'next/dynamic';
const IndexScreen = dynamic<IndexScreenProps>(() => import('#/screens/indexScreen').then(mod => mod.IndexScreen), {
ssr: false,
});
Not sure if it's the best to do, but it worked!
Here is some reference docs that helped me:
https://nextjs.org/docs/advanced-features/dynamic-import
In case you are using TypeScript: NextJS dynamic import issue
For some reason, I can't change the color of the carousel controls using either inline styling, or css modules...
Any ideas?
Here is the js file:
return (
<div>
<style>
{
`.custom-tag {
max-width: 100%;
height: 400px;
background: transparent;
}
#media (max-width: 1100px) {
.custom-tag {
height: 300px;
}
}`
}
</style>
<Carousel
activeIndex={activeIndex}
next={next}
previous={previous}
>
<CarouselIndicators items={items} activeIndex={activeIndex} onClickHandler={goToIndex} />
{slides}
<div className={styles.carouselControlWrapper}>
<CarouselControl direction="prev" directionText="Previous" onClickHandler={previous} />
</div>
<div className={styles.carouselControlWrapper}>
<CarouselControl direction="next" directionText="Next" onClickHandler={next} />
</div>
</Carousel>
</div>
);
}
export default GrowCarousel;
Here is my tentative css modules file:
.carouselControlWrapper {
color: black;
}
And yes, I have tried styling the component directly both using inline styling and CSS modules. The wrapper div is my latest attempt.
Help!
I haven't recreated the exact example above, but I still think my answer will be useful for you.
The reason you can't change the color of the control arrows is because they are background images in reactstrap. Using properties like 'color' or 'background-color' will not work here for that reason. You can use the filter property to play with the image's color in a limited way but I sense it will not solve your problem since what it can do is pretty limited.
What I suggest is following:
First, make sure you are getting the right element. In this case, I'd first suggest trying to change the background-color just to make sure you're targeting the correct element. The element you're looking for is the first <span> under the CarouselControl component. It has the class carousel-control-prev-icon or carousel-control-next-icon depending on direction. You can select it by specifying the class and element, using !important keyword etc.
Once you are sure that you are selecting the right element in your code, remove the background-color property and use a background-url property of your choosing to replace the background-url used in that <span>. You have to do it with an icon of your choosing. A simple example for importing a static resource to a component can be found here for example: https://github.com/Vanguard90/nyt-news/blob/master/src/components/App.tsx
So in short, you need to replace the icon used by reactstrap, that's the only real solution I see here.
If you just want to change the color from white to black (which was our case because the background was white-ish, and we couldn't see the prev/next buttons properly due to the lack of contrast) then you can use:
.carousel-control-prev-icon,
.carousel-control-next-icon{
filter: invert(1)
}
It doesn't exactly answer to OP, but it's a nice trick that helps avoid embedding your own prev/next images.
Angular4
Hi All. I'm have a single page within a large Angular4 app that needs to have body css that's different to the rest of the app.
I don't want to set ViewEncapsulation.None because it's just the one component that needs to be affected.
Can I use :host(), :host-context() or ::ng-deep in some way to select the body and apply the css rules? If so then how please? If not, is there another way to achieve this?
Thanks!
Thank you both very much. #Palpatine1991, you asked why I would want to access the <body> DOM element. This is because I have one page in the app which is a full screen game that is played on mobile devices and has drag and drop functionality within it. On iOS the "bounce" effect present in Safari makes drag and drop a very poor experience. So I wanted to add the following css to the body and html DOM elements of that single page, which suppresses that bounce effect.:
html,
body {
height: 100%;
width: 100%;
overflow: auto;
}
I had a look into the solutions you gave (thank you!) and went with the following solution:
ngOnInit() {
this.renderer2.addClass(document.body.parentElement, 'wholeClassGameBody_student');
this.renderer2.addClass(document.body, 'wholeClassGameBody_student');
}
ngOnDestroy() {
this.renderer2.removeClass(document.body.parentElement, 'wholeClassGameBody_student');
this.renderer2.removeClass(document.body, 'wholeClassGameBody_student');
}
This seems to work.
Thank you :)
Why do you need to add your CSS to <body> if it affects only one component?
Using :host() it will apply the styles to the element which is selected by component's selector.
Using ::ng-deep you can select only elements which are somewhere under the host element (but <body> is not under your host!)
The only way how to change the styles of the body from the component which has ViewEncapsulation.Emulated is using the Renderer2 API but it seems to me like a very bad practice
If you need to override some global <body> styling of your component, you can do it using :host-context. Example here: https://stackblitz.com/edit/angular-material2-issue-oodjmm
I was hoping to do something like this:
<Divider className="homepage-divider" />
But no matter if I add a class name this is all that shows up:
<div class="ui divider"></div>
How do I make my own className. I would like to use the divider multiple times with different widths. I know how to customize it with the override files already but that would set my regular divider to a set width.
I had similar issue of using the className . The class was getting applied when I viewed the source but the margin for which the class was added wasn't applied.
Later, I figured that the default classes such as ui, divider of semantic-ui have their own margin added.
Solution:
Add !important for the css property which is getting overwritten by sematic-ui css classes.
e.g: divider.jsx
import React from 'react';
import { Divider } from 'semantic-ui-react';
import './styles.css';
const CustomDivider = () => <Divider className='custom-margin-class'/>;
export default CustomDivider;
styles.css
.custom-margin-class {
margin: 8px !important;
}
as Tholle mentioned, it should work.
see working example:
https://codesandbox.io/s/2p398kyykr
That's very odd, when i strip out everything in the file and try something similar to your codesandbox it works. I will play around with my code and post what the issue is once I figure it out