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;
}
`;
Related
I need to disable the hover color but seems like its not working !
const ButtonWrapper = styled(Box)`
display: flex;
margin: 0 3% 0 auto;
& > button,
& > p,
& > div {
margin-right: 40px;
align-items: center;
font-size: 16px;
}
`;
const LoginButton = styled(Button)`
color: #2874f0;
cursor: pointer;
background: #fff;
border-radius: 2px;
margin-left: 45px;
box-shadow:none;
border:1px solid #DBDBDB;
padding: 5px 40px 5px 40px;
text-transform:none;
font-weight:500;
height:32px;
width:130px;
`;
const CustomButtons = () => {
return (
<ButtonWrapper>
<LoginButton variant="contained">Login</LoginButton>
</ButtonWrapper>
);
};
export default CustomButtons;
There is a blue hover effect coming that i dont want; I tried the inline style sx={{ "&:hover": { backgroundColor: "transparent" }} } but its not working.
How can i add the transparent style to the LoginButton using the &:hover?
i written like
const LoginButton = styled(Button)`
color: #2874f0;
cursor: pointer;
background: #fff;
border-radius: 2px;
margin-left: 45px;
box-shadow:none;
border:1px solid #DBDBDB;
padding:5px 40px 5px 40px;
text-transform:none;
font-weight:500;
height:32px;
width:130px;
//dont know the correct syntax
"&:hover": {
background-color: transparent;
}
`;
//its not working
It is the MuiButton-root class which is not letting you change the background color. You can target this class using sx prop or styled. Check the fix below, I'm using sx prop and targeting MuiButton-root class and setting the background to transparent.
<LoginButton variant="contained" sx={{ '&.MuiButton-root:hover':{bgcolor: 'transparent'} }}>
Login
</LoginButton>
i'm trying to make a react project with styled components, and i want to use a radio button, but when i try to add css to the radio when it's checked it didn't work as i expected, can you help me?
const RadioGroup = styled.div`
border: solid 3px #332f35;
display: inline-block;
margin: 20px;
border-radius: 10px;
overflow: hidden;
input[type=radio] {
position: absolute;
visibility: hidden;
display: none;
}
label {
color: lighten(#332f35,40%);
display: inline-block;
cursor: pointer;
font-weight: bold;
padding: 5px 20px;
}
input[type=radio]:checked + label{
color: lighten($bg,60%);
background: #ff9000;
}
input[type=radio] + label {
border-left: solid #a1a1a1;
}
`
this is the styled component i'm trying to use in the Radio button, thanks guys!
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>
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.
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