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>
Related
I am trying to implement an effect that when I put the mouse over the box, the button component will show and make the box a bit bigger, and when the mouse is out the button won't show and the box size get a big smaller.
const Container = styled.div`
flex:1;
margin: 15px;
min-width: 350px;
max-width: 350px;
height: 500px;
background-color: none;
z-index: 3;
justify-content: center;
position: relative;
border-radius: 20px;
border-style: solid;
border-width: 2px;
border-color: grey;
&:hover{
background-color: #a5e293;
}
`;
const Button = styled.button`
font-size: 1em;
margin: 1em;
padding: 0.25em 1em;
border: 2px solid palevioletred;
border-radius: 3px;
justify-content: center;
display: flex;
`;
const Product = ({item}:any) => {
return (
<Container>
<img src={item.imagem} className='imag'/>
<Box justifyContent='center' display='flex'>
<Typography>
{item.nome}
</Typography>
</Box>
<Box justifyContent='center' display='flex'>
<Typography>
{item.preco}
</Typography>
</Box>
<Box justifyContent='center' display='flex'>
<Button>Comprar</Button>
</Box>
</Container>
)
}```
This is my code without the changes I tried, because it was pretty messy
You can do this with conditional rendering or with styles. Below are examples, the first with conditional rendering, the second with styles.
import React, { useState } from 'react'
const Container = styled.div`
flex: 1;
margin: 15px;
min-width: 350px;
max-width: 350px;
height: 500px;
background-color: none;
z-index: 3;
justify-content: center;
position: relative;
border-radius: 20px;
border-style: solid;
border-width: 2px;
border-color: grey;
&:hover {
background-color: #a5e293;
}
`
const Button = styled.button`
font-size: 1em;
margin: 1em;
padding: 0.25em 1em;
border: 2px solid palevioletred;
border-radius: 3px;
justify-content: center;
display: flex;
`
const Product = ({ item }) => {
const [isButtonVisible, setButtonVisible] = useState(false)
const handleButtonToggle = () => {
setButtonVisible(!isButtonVisible)
}
return (
<Container>
<img src={item.imagem} className="imag" />
<Box justifyContent="center" display="flex">
<Typography>{item.nome}</Typography>
</Box>
<Box justifyContent="center" display="flex">
<Typography>{item.preco}</Typography>
</Box>
<Box
onMouseEnter={handleButtonToggle}
onMouseLeave={handleButtonToggle}
justifyContent="center"
display="flex"
>
Other components
{isButtonVisible && <Button>Comprar</Button>}
</Box>
</Container>
)
}
And with help styles.
const Button = styled.button`
font-size: 1em;
margin: 1em;
padding: 0.25em 1em;
border: 2px solid palevioletred;
border-radius: 3px;
justify-content: center;
/* initial display: none */
display: none;
`
const StyledBox = styled(Box)`
:hover ${Button} {
display: flex;
}
`
After updating 'React-Router-Dom' in version6, I've studied functional components and styled-component. I am sorry if I asking such a stupid question.
I tried to make a button and when I click the button(onClick event) it changes the background color. So I tried to give pass the color in props and changing it when onClick event happened. When I check the developer tool, the color part change(#f4f4f4 or #f22).
So, I tried to setting setState and setState like this
export default function MarketPrice() {
const [color, setColor] = useState('#f4f4f4');
const onClick = () => {
color === '#f4f4f4' ? setColor('#fff') : setColor('#f4f4f4');
};
return (
<MarketPriceWrapper>
<TitleWrapper>
<MarketPriceTitle>시세</MarketPriceTitle>
<showAllSizes>
<AllSize>모든 사이즈</AllSize>
<FaRegArrowAltCircleDown />
</showAllSizes>
</TitleWrapper>
<salesGraphWrapper>
<Line data={data} options={options} />
</salesGraphWrapper>
<ButtonsWrapper>
<Button color={color} onClick={onClick}>
체결 거래
</Button>
<Button color={color} onClick={onClick}>
판매 입찰
</Button>
<Button color={color} onClick={onClick}>
구매 입찰
</Button>
</ButtonsWrapper>
</MarketPriceWrapper>
);
}
const MarketPriceWrapper = styled.div`
margin-top: 40px;
padding-left: 40px;
`;
const TitleWrapper = styled.div`
padding-top: 19px;
padding-bottom: 12px;
border-bottom: 1px solid #ebebeb;
`;
const MarketPriceTitle = styled.span`
padding-top: 4px;
display: inline-block;
line-height: 16px;
font-weight: bold;
color: #222;
`;
const AllSize = styled.span`
display: inline-block;
margin-right: 5px;
margin-left: 350px;
font-size: 18px;
`;
const ButtonsWrapper = styled.div`
display: flex;
justify-content: space-evenly;
margin-top: 40px;
border-radius: 10px;
background-color: #f4f4f4;
`;
const Button = styled.button`
display: block;
line-height: 16px;
padding: 7px 0 9px;
width: 150px;
font-size: 13px;
text-align: center;
border-radius: 8px;
border: none;
background-color: ${props => (props.onClick ? '#f4f4f4' : '#222')};
color: rgba(34, 34, 34, 0.8);
`;
Here is a button that I want to change the background color when I clicked it
Furthermore, is it okay with using the same component name as the button? I wonder if I click one of the buttons it changes the all-button background color.
It would be really appreciate your help!
I have a styled.button that works perfectly on desktop view, but when on my desktop I toggle to mobile view it doesn't work at all.
Button:
const DateElement = styled.button`
background-color: ${(props) => (props.primary ? '#DEE2FF' : '#696B86')};
color: ${(props) => (props.primary ? 'black' : '#dedee4')};
box-shadow: none;
padding: 9px;
width: 90px;
text-align: center;
height: 90px;
user-select: none;
border: 1px solid rgba(20, 79, 118, 0.2);
& :hover {
cursor: pointer;
}
& :focus {
display: none;
}
${(theme) => theme.theme.breakpoints.down('sm')} {
padding: 3px;
width: 70px;
text-align: center;
height: 70px;
}
`;
render:
return (
<DateElement
key={date.getTime()}
primary={isSelected}
onClick={() => handleClick(date)}
className={clsx({
[classes.crossed]: date.getTime() + endTimeMilli < today.getTime(),
[classes.containerWidth]: dates.length > 4,
})}
>
<Typography className={classes.date}>{getWeekDay(date)}</Typography>
<Typography className={classes.month}>{getMonth(date)}</Typography>
<Typography className={classes.day}>{date.getDate()}</Typography>
</DateElement>
);
What is the issue?
How can I fix this?
I end up fixing it changing the styled component from button to div, I just changed it and it work, I still don't understand why or how but it worked.
const DateElement = styled.div`
Is it because you are using theme.theme?
${(theme) => theme.theme.breakpoints.down('sm')} {..
I could be wrong but not how it usually looks according to the docs: https://mui.com/customization/breakpoints/
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 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;
}