Prevent Navlink from highlighting on hover - javascript

I am trying to have a whole section of a page act as a link to another page, but I don't want the section to be highlighted in blue when the user hovers over it. No matter what I do it highlights on hover.
JS
import { NavLink } from "react-router-dom";
<NavLink to="/application" className="nohighlight">
<h1 className="puppytitle">
Get your own puppy
</h1>
</NavLink>
CSS
I thought using !important was like the nuclear option for css, but even that is not working.
.nohighlight {
text-emphasis: none;
text-decoration: none;
}
.nohightlight:hover {
text-decoration: none !important;
}
Thank you in advance.

Looks like all you needed to do was define the color of the text. Here's an example:
import React from "react";
import { BrowserRouter as Router, NavLink } from "react-router-dom";
import styled from 'styled-components';
export default function App() {
return (
<div>
<h1>Hello CodeSandbox</h1>
<Router>
<StyledNavLink to='www.google.ca'>testing</StyledNavLink>
</Router>
</div>
);
}
const StyledNavLink = styled(NavLink)`
text-emphasis: none;
text-decoration: none;
color: black;
&:hover {
text-emphasis: none;
text-decoration: none;
color: black;
}
`;
CodeSandbox: https://codesandbox.io/s/stack-63925598-navlink-color-gqop8

Related

Hide slider thumb in material-ui library

I'm trying to hide the slide thumb. I tried to do it without using a library but then I think that it should be better to use material-ui because maybe it would be easier but I'm here asking help.
Here is my code:
import * as React from "react";
import Slider from "#mui/material/Slider";
import "./style.css";
export default function ContinuousSlider() {
const [value, setValue] = React.useState(30);
const handleChange = (event, newValue) => {
setValue(newValue);
};
return (
<Slider
aria-label="Volume"
value={value}
onChange={handleChange}
focusVisible={false}
/>
);
}
style:
.MuiSlider-thumb {
background-color: orange;
box-shadow: none;
width: 0px;
height: 0px;
}
.MuiSlider-rail {
background-color: orange;
border: none;
}
.MuiSlider-track {
background-color: red;
border: none;
}
.MuiSlider-rail {
background-color: green;
}
working code here
result:
on focus
I was able to hide the main thumb but not the "secondary thumb". I don't know how to call it, the light blue one that appears clicking on the thumb.
How can I remove it?
I want the following style always, even when user drag the thumb:
You could add style override for hover (pseudo-class) and active state (for MUI it is .Mui-active)
.MuiSlider-thumb:is(:hover, .Mui-active) {
display: none;
}
Demo

Using router link on a div in react

Can anyone help me incorporate routing in my project? I am trying to route to a different page when a div is clicked but for some reason the div does not show up unless you put something in it(the text "Card") and also not how I styled it in my stylesheet.
The div is inside a component I did not fully finish making yet, but essentially when you click on this parent div it takes you to a different page.
The code in the main App component is this:
import React from 'react';
import {BrowserRouter as Router, Switch, Route} from 'react-router-dom'
import { Link } from 'react-router-dom'
import NAVBAR from './components/NAVBAR.js';
import CARD from './components/CARD.js'
import CONTENTS from './components/CONTENTS.js'
import './App.css'
import HOME_PAGE from './components/pages/HOME_PAGE.js';
function App() {
return (
<>
<body>
<header>
<NAVBAR />
</header>
<div className = "info-container">
<div className="cards-container">
<Link to = "/components/pages/HOME_PAGE.js"><CARD id = "pendulum"/></Link>
</div>
<CONTENTS />
</div>
<Router>
<Switch>
<Route exact path = "/components/pages/HOME_PAGE.js" component = {HOME_PAGE}/>
</Switch>
</Router>
</body>
</>
);
}
export default App;
The code of the div components(CARD) is this:
import React from 'react'
import './card.css'
import { Link } from 'react-router-dom'
export default function CARD({ id }) {
return (
<>
<div className = "card-container">
</div>
</>
)
}
I basically wrapped the div components(CARD) with a Link tag and pointed it towards the page I want it to render. But the div just does not appear(It does appear if put some text inside the Link tags but also not how I styled the div). The styles are simple but it might be a styling issue so here are the styles:
card.css:
.card-container{
height: 47.1%;
width: 100%;
background-image: linear-gradient(to right, #0c0624, #0c0625, #0b0726, #0b0727, #0a0828, #090d2b, #08112e, #071531, #071b36, #07213b, #082740, #0b2d45);
border-radius: 15px;
margin-bottom: 20px;
}
App.css:
*, *::before, *::after{
box-sizing: border-box;
}
body{
margin: 0;
overflow: none;
background-image: linear-gradient(to left top, #3e000b, #39030a, #330508, #2e0607, #290606, #270505, #260505, #240404, #250303, #260203, #260102, #270002);
}
.info-container{
display: flex;
flex-wrap: nowrap;
justify-content: center;
align-self: center;
height: 90vh;
width: 100%;
padding: 12px;
position: relative;
overflow: hidden;
scroll-behavior: smooth;
}
.cards-container{
display: flex;
flex-wrap: wrap;
height: 100%;
width: 100%;
margin: 5px;
margin: 10px 0px 0px 0px;
border-radius: 15px;
overflow: scroll;
}
If i get you right, you can't wrap a div with a Link what you must know is that a react-router-dom Link component is just a regular html a tag. What you can essentially do to get this to work is to use the react-router-dom useHistory() hook and push or replace the history on your single page application. How you can do it?
In your Card component, which is the component yiu are trying to click and navigate you somewhere do this
import React from 'react'
import './card.css'
import { useHistory } from 'react-router-dom'
export default function CARD({ id }) {
const history = useHistory()
const navigate =() => history.push('/components/pages/HOME_PAGE.js' )
return (
<div className = "card-container" onClick={navigate} >
</div>
)
}
I hope you get the idea
Little addition, I'm just learning react it's probably not the best solution but it seems to work for me.
Exactly you can use history.push to do everything, for example history.push(path/${id}). Hope you get the idea
---> reply
function TourItem({ currentItems }) {
const [itemId, setItemId] = useState();
useEffect(()=>{
if (itemId) {
history.push(`/tour-detail/${itemId}`);
}
}, [itemId]);
return (
<div className={cx("wrapper")}>
{currentItems && currentItems.map(item => (
<div key={item.id} className={cx("item")} onClick={()=>setItemId(item.id)}>
<div className={cx("inner")}>
<div className={cx("image")}>
<img src={item.images[0]} alt={item.tourName} />
</div>
<div className={cx("meta")}>
<h4 className={cx("tour-name")}>
<Link to={`/tour-detail/${item.id}`}>{item.tourName}</Link>
</h4>
<p>Khởi hành từ: <span>{item.departureFrom}</span></p>
<p>Thời gian: <span>{item.time}</span></p>
<p>Giá từ: <span><FormatPrice>{item.price}</FormatPrice> VNĐ</span></p>
</div>
</div>
</div>
))}
</div>
);
}

How to apply media query in Gatsby site?

Here is my index.js code.
import * as styles from "../styles/home.module.css";
export default function index() {
return (
<section id="#">
<div
className={styles.heading}>
Hello World!
</div>
</section>
}
Here is my CSS file home.module.css
.heading {
color: yellow;
}
#media screen and (max-width:768px) {
.heading{
color: red;
}
}
The original color of the text remains yellow. I don't know why but when I resize the window the color does not change to red. May I know where I am wrong or what is the possible solution?
First of all, you must import react.
import * as React from 'react'
And you are missing close parenthesis ).
I've made some changes and it works well on my end.
import * as React from 'react'
import * as styles from './home.module.css'
const IndexPage = () => (
<section id="#">
<div className={styles.heading}>Hello World!</div>
</section>
)
export default IndexPage
home.module.css
.heading {
color: yellow;
#media screen and (max-width: 768px) {
color: red;
}
}

React link is not redirecting to different sections on same page

I'm beginner to react.js and I'm stuck with a small issue.
I'm making a responsive website and on the footer section I added some links to redirect to the specific section of website like(about, services, contact pages)
Index.js
import {FooterLink,FooterLinkTitle} from './FooterElements'
const Footer = () => {
return (
......
<FooterLinkTitle>About Me</FooterLinkTitle>
<FooterLink to='home' exact='true'>Home</FooterLink>
<FooterLink to="about" id={"about"} exact="true">About</FooterLink>
<FooterLink to='discover'>Discover</FooterLink>
<FooterLink to='services'>Services</FooterLink>
<FooterLink to='gallery'>Gallery</FooterLink>
<FooterLink to='contact'>Connect With Me</FooterLink>
<FooterLink to='contact'>Terms And Condition</FooterLink>
.......
)
}
export default Footer
Here is the FooterElements.js:
Here I used styled-components for styling
import styled from 'styled-components';
import {Link} from 'react-router-dom';
export const FooterLink = styled(Link)`
color: #fff;
text-decoration: none;
margin-bottom: 0.5rem;
font-size: 14px;
cursor: pointer;
&:hover {
color: #01bf71;
transition: 0.3s ease-out;
}
`;
When I click on about or home page its redirecting to a empty page. I tried by putting id inside the FooterLink the result is same and I tried with using component={about} Its showing about page on that link section.
Any suggestion will helpful

Clickable div acting as a button function react js

I have a button function inside the component 'CZButton', the button is used in "personlist" for a pop up, I am trying to make the div card inside of either 'personlist' or 'person' clickable so that instead of clicking the button, the div would be clicked and shows the drawer pop up.
I tried adding onclick inside divs and but it did not seem to reach the drawer function. here is a sandbox snippet, would appreciate the help.
https://codesandbox.io/s/l9mrzz8nvz?fontsize=14&moduleview=1
You can add an onClick listener in React just by writing something like:
// omitting the rest of the render function for brevity
return (
<div className="row" onClick={e => console.log("Clicked")}></div>
);
Just be careful with the HTML semantics. Although it is possible, I wouldn't really recommend adding onClick events to a div. There are good resources online about HTML5 standards and what you should adhere too.
Live Demo: https://n329k226om.codesandbox.io/
App.js
import React from "react";
import ReactDOM from "react-dom";
import "./styles.css";
class App extends React.Component {
constructor() {
super();
this.test = this.test.bind(this);
}
test() {
alert("function executed on clicking div");
}
render() {
return (
<div>
<div
onClick={() => this.test()}
className="interactivediv fa fa-window-close"
>
div
</div>
</div>
);
}
}
const rootElement = document.getElementById("root");
ReactDOM.render(<App />, rootElement);
styles.css
.App {
font-family: sans-serif;
text-align: center;
}
.interactivediv {
height: 150px;
width: 150px;
background: rgb(68, 196, 196);
cursor: pointer;
border: 1px solid grey;
}
.interactivediv:active {
border: 2px solid black;
}

Categories