I'm trying to show a border-bottom with a different color when my menu is active but there's a problem with className on my React code that it doesn't allow me to use multiple className and if anyone has any idea to solve this?
.NavigationItem{
margin: 0;
box-sizing: border-box;
display: flex;
height: 100%;
align-items: center;
}
.NavigationItem a{
color: white;
text-decoration: none;
height: 100%;
padding: 14px;
border-bottom: 4px solid transparent;
box-sizing: border-box;
display: block;
background-color: rgb(49, 110, 223);
}
.NavigationItem a:hover,
.NavigationItem a:active,
.NavigationItem a.active{
background-color: rgb(33, 77, 158);
border-bottom: 4px solid greenyellow;
color: white;
}
import React from 'react';
import classes from './NavigationItem.css';
const navigationItem = (props) => (
<ul className={navigationitem}>
<a href={props.link} className={props.active ? navigationitem.active: null}>{props.children}</a>
</ul>
);
let navigationitem = ['NavigationItem'].join('');
export default navigationItem;
Use template literal: className={`${navigationitem}${props.active ? ` ${navigationitem.active}` : ''}`}
or use classnames library for joining classNames.
Related
how can i move image a very little bit up and add text below it { note i am talking about the highlighted profile image with blue }also see my code and tell every step to do that i have tired margin button but it didn't work pls tell how to do pls also see the image image here
`import { Header } from "../../features/theme/Header";
import styles from "./Home.module.css";
import { useAppSelector } from "../../app/hooks";
import { Feed } from "../../features";
export function Home(): JSX.Element {
const { currentUserImage } = useAppSelector((state) => state.currentUser);
return (
<div className={styles.home}>
<Header page="Home" />
<div className={styles.tweetField}>
<div className={styles.userAvatar}>
<img src={currentUserImage} alt="" />
</div>
<div>
<div>
</div>
</div>
</div>
<Feed />
</div>
);
}
my css code
.home{
border-right: solid 0.2px var(--border-color);
}
.homeHeader{
display: flex;
align-items: center;
justify-content: space-between;
padding: 1rem;
border-bottom: solid 0.2px var(--border-color);
font-size: 1.2rem;
font-weight: bold;
}
.homeHeader button{
border: none;
background: none;
font-size: 1.3rem;
color: var(--theme-page-text);
}
.tweetField{
display: flex;
margin-top: 1rem;
border-bottom: solid 0.2px var(--border-color);
}
.userAvatar{
outline: none;
width: 3rem;
height: 3rem;
border-radius: 50%;
margin-left: 1rem;
background: #fff;
}
.userAvatar img{
width: 3rem;
height: 3rem;
border-radius: 50%;
object-fit: cover;
background: #fff;
}
.tweetActions{
width: 100%;
margin: 1rem;
}
.tweetActions span{
font-size: 1.3rem;
color: var(--light-text-color);
}
.tweetActions div{
display: flex;
align-items: center;
justify-content: space-between;
margin-top: 1rem;
}
.tweetActions button:first-child{
border: none;
background: none;
outline: none;
color: var(--primary-color);
font-size: 1.2rem;
}
.tweetActions button:last-child{
border: none;
outline: none;
color: #fff;
background: var(--primary-color);
opacity: 0.5;
font-size: 1rem;
font-weight: bold;
padding: 0.5rem 1.2rem;
border-radius: 2rem;
}
wewaewavresrvesgrefesfvesfvesfrervesrservesrves
Don't know why hover effect code on button in StyledComponents is not working, in React app.
Can You please look at the code ? Thanks !
export const StyledButton = styled.button`
width: 12vh;
background-color: ${colors.buttonColor};
-webkit-box-shadow: 0px 0px 35px -4px rgba(237, 38, 38, 0.51);
box-shadow: 0px 0px 35px -4px rgba(237, 38, 38, 0.51);
height: 4vh;
margin-top: 5vh;
border-radius: 5px;
padding-bottom: 5px;
display: flex;
align-items: center;
justify-content: center;
& :hover {
background-color: hotpink;
}
`;
<StyledButton>
<Link to="/main" style={{ textDecoration: "none" }}>
<StyledParagraph>Go without</StyledParagraph>
</Link>
</StyledButton>
Do you need correct selector.
In styled components, if you are styling the component itself, you don't need to write "&:hover", you can write ":hover" instead.
Both selectors are correct, use either one. If I apply styles to the styled component itself, I usually don't write the "&" sign.
Instead
& :hover {
background-color: hotpink;
}
Do you need write
:hover {
background-color: hotpink;
}
Below code with correct selector for hover.
export const StyledButton = styled.button`
width: 12vh;
background-color: ${colors.buttonColor};
box-shadow: 0px 0px 35px -4px rgba(237, 38, 38, 0.51);
height: 4vh;
margin-top: 5vh;
border-radius: 5px;
padding-bottom: 5px;
display: flex;
align-items: center;
justify-content: center;
:hover {
background-color: hotpink;
}
`;
I want my navbar to be fixed and stay above the rest of the page as i scroll down, but whenever i add the 'position: fixed;' function on the css page it disappears.
Here is the code for the navbar in JS and Css...
import Logo from '../../Images/mmt-white.png';
import './Navbar.css';
const Navbar = props => (
<header className="Navbar">
<nav className="Navbar__navigation">
<div></div>
<div className='Navbar__logo'><img src={Logo}/></div>
<div className='spacer '/>
<div className="Navbar_navigation-items">
<ul>
<li>Home</li>
<li>Servicos</li>
<li>Depoimentos</li>
<li>Começando</li>
<li>Contacte-nos</li>
</ul>
</div>
<div className="Navbar_navigation_items_acessar">
<ul>
<li>Acessar</li>
</ul>
</div>
</nav>
</header>
);
export default Navbar;
And here is my app.js where i import all the pages and the navbar on top off them...
import Navbar from './components/NavBar/Navbar';
import Home from "./components/pages/HomePage/Home";
import Comecando from "./components/pages/Comecando/Comecando";
import Depoimentos from "./components/pages/Depoimentos/Depoimentos";
import Sac from "./components/pages/SAC/Sac";
import Servicos from "./components/pages/Servicos/Servicos";
import './App.css';
function App () {
return(
<div className='App'>
<div>
<Navbar/>
</div>
<Home/>
<Servicos/>
<Comecando/>
<Depoimentos/>
<Sac/>
</div>
);
}
export default App;
and here is the css
.NavbarItems {
background: linear-gradient(90deg,rgb(49,56,64)0%,rgba(49, 56, 64, 1) 100%);
height: 10vh;
display: flex;
justify-content: center;
align-items: center;
font-size: 1,2rem;
left: 0;
position: fixed;
top: 0;
z-index: 1;
position: relative;
}
.sticky {
position: fixed;
top: 0;
width: 100%;
}
.navbar-logo{
position: absolute;
top: 0;
left: 0;
transform: translate(15%, 10%);
}
.fa-react{
margin-left: 0.5rem;
font-size: 1,6rem;
}
.nav-menu {
display: grid;
grid-template-columns: repeat(6, auto);
grid-gap: 10px;
transform: translate(8%, 0%);
list-style: none;
margin-left: 10vh;
text-align: center;
width: 80vw;
justify-content: end;
padding-left: 10vh;
margin-right: 1rem;
font-size: 10px;
}
.nav-links {
color:#edf0f1;
margin-top: 2rem;
padding-right: 2rem;
padding: 0;
text-decoration: none;
font-size: 22px;
font-family: monospace;
text-transform: uppercase;
}
.nav-links:hover{
border-radius: 4px;
transition: all 0.2s ease0;
color: #0088a9;
}
.fa-bars{
color: #ffffff;
}
button{
margin-left: 10vh;
right: 0;
padding: 9px 25px;
background-color: rgba(0, 136, 169, 1);
border: none;
border-radius: 50px;
cursor: pointer;
transition: all 0.3s ease 0s;
font-family: "Montserrat", sans-serif;
font-weight: 500;
color: #edf0f1;
font-size: 17px;
text-decoration: none;
}
.menu-icon{
display: none;
}
.nav-links-mobile{
color: transparent;
}
You may want to add the following to your NavBar class in your NavBar.css file to add the positional properties like so:
left: 0;
position: fixed;
top: 0;
z-index: 1; // increase this value if you have other elements at varying levels of elevation
Or you may want to add the following to your NavBar class in your NavBar.css file instead of position: fixed (it depends on the behavior you're looking for):
position: sticky;
top: 0; // vertical position you'd like the element to stick to
z-index: 1; // increase this value if you have other elements at varying levels of elevation
This is my first time using styledComponent.
Can someone tell me why my hover effect on SubmitBtn not working.
I just want to add hover effect on the submit button.
import styled from 'styled-components';
const SubmitBtn = styled.button`
width: 50%;
padding: 14px 20px;
margin: 8px 0;
display: inline-block;
border: none;
borderRadius: 4px;
cursor: pointer;
background: green;
color: white;
&:hover {
background: darkgreen;
color: grey;
}
`
<SubmitBtn>Submit Book</SubmitBtn>
I have taken the SubmitBtn out of component, and now it works.
You have to return/render the component.
import styled from 'styled-components';
const SubmitBtn = styled.button`
width: 50%;
padding: 14px 20px;
margin: 8px 0;
display: inline-block;
border: none;
borderRadius: 4px;
cursor: pointer;
background: green;
color: white;
&:hover {
background: darkgreen;
color: grey;
}
`
export const App = () => <SubmitBtn>Submit Book</SubmitBtn>
According to styled-components doc's I can refer to another component to trigger, for example, a hover effect.
const Link = styled.a`
display: flex;
align-items: center;
padding: 5px 10px;
background: papayawhip;
color: palevioletred;
`;
const Link2 = styled.a`
display: flex;
align-items: center;
padding: 5px 10px;
background: steelblue;
color: white;
${Link}:hover & {
background-color: greenyellow;
color: black;
}
`;
class Hello extends React.Component{
render() {
return(
<div>
<Link>Hello World</Link>
<Link2>Hello Again</Link2>
</div>
)
}
}
Basically, hovering mouse on my <Link> should trigger a change in background-color in <Link2>.
This is not happening. Any ideas why?
I prepared a code snippet here: https://codesandbox.io/s/qv34lox494
You can refer to styled-components which are children of your styled-component, not side-by-side.
See a quote from the doc:
Here, our Icon component defines its response to its parent Link being
hovered
For your problem, you can create a wrapper for both of your links, and use the adjacent sibling selector in CSS like this:
const Wrapper = styled.div`
& ${Link}:hover + ${Link2} {
background-color: greenyellow;
color: black;
}
`;
https://codesandbox.io/s/mo7kny3lmx
The other way is to modify your selector on Link2 to use siblings (now it's nested item selector). In that case you can get rid of extra wrapper
const Link = styled.a`
display: flex;
align-items: center;
padding: 5px 10px;
background: papayawhip;
color: palevioletred;
`;
const Link2 = styled.a`
display: flex;
align-items: center;
padding: 5px 10px;
background: steelblue;
color: white;
${Link}:hover + & {
background-color: greenyellow;
color: black;
}
`;
class Hello extends React.Component{
render() {
return(
<div>
<Link>Hello World</Link>
<Link2>Hello Again</Link2>
</div>
)
}
}
you can do it like this. it works for many components:
const Hi0 = styled.div`
width:75px;
height:75px;
display: flex;
align-items: center;
padding: 5px 10px;
background: papayawhip;
color: palevioletred;
border-radius:50%;
`;
const Hi1 = styled.div`
width:75px;
height:75px;
display: flex;
align-items: center;
padding: 5px 10px;
background: papayawhip;
color: palevioletred;
border-radius:50%;
`;
const Hi2 = styled.div`
width:75px;
height:75px;
display: flex;
align-items: center;
padding: 5px 10px;
background: papayawhip;
color: palevioletred;
border-radius:50%;
`;
const Ind = styled.div`
width:75px;
height:75px;
border-radius:50%;
display: flex;
align-items: center;
padding: 5px 10px;
background: steelblue;
color: white;
transition:0.5s;
`;
const Wrapper = styled.div`
${Hi0}:hover ~ ${Ind} {
background: blue;
};
${Hi1}:hover ~ ${Ind} {
background: red;
};
${Hi2}:hover ~ ${Ind} {
background: yellow;
};
`;
class App extends React.Component{
render() {
return(
<Wrapper>
<Hi0>Hello World</Hi0>
<Hi1>Hello World</Hi1>
<Hi2>Hello World</Hi2>
<Ind>Hello Again</Ind>
</Wrapper>
)
}
}
export default App;
sandboxexemple