I have this 2 styled components
export const Icon = styled.svg`
width: 8px;
height: 8px;
background: black;
`
export const Dots = styled.div`
border: 2px solid green !imporant;
height: 30px;
background: white;
width: 16px;
height: 16px;
border: solid 1px #d2d2d2;
border-radius: 20px;
top: 25px;
position: relative;
${Icon}: hover {
background:black;
}
}
`
I want to display Icon on the hover of this div but i dont understand why it is not working,
Any suggestions please?
There is no problem with your code except on hover you don't change the color from its default value black
const Icon = styled.div`
width: 100px;
height: 100px;
background: black;
`;
export const Dots = styled.div`
${Icon}:hover {
background: red;
}
`;
export default function App() {
return (
<Dots>
<Icon />
</Dots>
);
}
https://codesandbox.io/s/styled-react-template-forked-nzwm8
You should place the hover styles inside the icon
export const Icon = styled.svg`
width: 8px;
height: 8px;
background: black;
&:hover {
background: black;
}
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>
Hi I am trying to figure out how to match my figma design to my react web app, I am trying to increase the blank spacing between the options in the header does anyone know how to do that? Thanks!
Figma image link: https://imgur.com/a/cgmSCr1
Current web app: https://imgur.com/a/cgmSCr1
Code:
import styled from 'styled-components';
import LinkButton from '../../../components/LinkButton';
import { theme } from '../../../styles/theme';
export const HeaderWrapper = styled.header`
box-sizing: border-box;
display: flex;
align-items: center;
justify-content: space-between;
height: 71.5px;
width: 100%;
padding: 80px 38px 0 50px;
margin-bottom: 100px;
`;
export const Logo = styled.img`
margin-left: 43px;
height: 73px;
width: 260px;
margin-top: 10px;
`;
export const NavBar = styled.nav`
margin-right: 43px;
display: flex;
padding-top: 5px;
a {
margin-left: 57px;
text-transform: uppercase;
font-size: 14px;
font-family: ${({ theme }) => theme.font.font3.new};
font-weight: ${({ theme }) => theme.fontWeight.med_700};
}
a:first-of-type {
margin-left: 0px;
}
`;
export const NavButton = styled(LinkButton)`
margin-left: 52px;
text-transform: uppercase;
font-size: 14px;
font-family: ${({ theme }) => theme.font.font3.new};
font-weight: ${({ theme }) => theme.fontWeight.med_700};
`;
export const customStyles = {
overlay: {
backgroundColor: 'rgba(30, 30, 30, .9)',
},
content: {
position: 'absolute',
width: '460px',
height: '718px',
top: '50%',
left: '50%',
background: '#111',
border: `4px solid ${theme.colors.modal.border}`,
borderRadius: '15px',
boxSizing: 'border-box',
transform: 'translate(-50%, -50%)',
},
};
it can be many ways you can do it by giving fix width to the list in header or using grid system like give column to each I think you should do it with padding. Give the padding to a tag on x-axis it will be the good option.
considering your a tag as each item in navbar
a {
//added code
padding-right:40px;
padding-right:40px;
margin-left: 57px;
text-transform: uppercase;
font-size: 14px;
font-family: ${({ theme }) => theme.font.font3.new};
font-weight: ${({ theme }) => theme.fontWeight.med_700};
}
I tried initially working with makestyles but that didn't work with Keyframes and now I wrote the below code that compiles properly but for some reason doesnt show anything on screen??
Is there anything I'm not writing correctly or formatting correctly? Thanks
import styled, { keyframes } from 'styled-components';
export default function Confirmed() {
return (
<Wrap>
<Container>
<Box />
</Container>
</Wrap>
);
}
const animation = keyframes`
0% {
width: 60px;
height: 60px;
background:#f0f0f0;
}
25%{
width: 60px;
height: 60px;
background: #f8f8f8;
}
50% {
width: 60px;
height: 240px;
background: #f8f8f8;
}
100% {
width: 480px;
height: 240px;
background: #fafafa;
}`;
const Container = styled.div`
background: #f0f0f0;
box-sizing: border-box;
display: flex;
justify-content: center;
align-items: center;
width: 100vw;
height: 100vh;
`;
const Wrap = styled.div`
margin: 0;
padding: 0;`;
const Box = styled.div`
border-radius: 20px;
width: 60px;
height: 60px;
background: #f0f0f0;
animation-name: ${animation};
animation-duration: 8s;
animation-iteration-count: infinite;
`;
So as i mentioned in the title when i am using styled component, I want to use ::after in my input and it does not work.. I put my code right below, so check it out
import styled from 'styled-components';
const Input = styled.input`
padding: 25px 80px;
border-radius: 100px;
margin: 15px 0px;
border: none;
border: 2px solid ${props => props.theme.colors.grey};
&:focus {
outline: none;
border: 2px solid ${props => props.theme.colors.main};
}
::after {
content: "hi"
}
`;
export default Input;
You can achieve it in the following way:
import styled from 'styled-components';
const div = styled.div`
padding: 25px 80px;
border-radius: 100px;
margin: 15px 0px;
border: none;
border: 2px solid ${props => props.theme.colors.grey};
&:focus {
outline: none;
border: 2px solid ${props => props.theme.colors.main};
}
&:after {
content: "hi"
}
`;
export default Input;
Input element doesn't allow the use of before and after pseudo classes
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>