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/
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>
render the BarItem and BarItemSelect inside the link when the is true, they are all set precisely an using a css class, now it's two components...
I don't see a way to do this
const S = {
BarItem: styled.a`
position: relative;
display: block;
height: 3rem;
text-decoration: none;
cursor: pointer;
border: 0;
`,
BarItemSelected: styled.a`
font-weight: 500;
color: var(--dark-text-color);
filter: invert(1);
&:after {
content: '';
position: absolute;
display: block;
width: 100%;
height: 5px;
background-color: white;
border-radius: 5px 5px 0 0;
bottom: 0;
#media (max-width: 63.8rem) {
color: var(--dark-text-color);
filter: invert(1);
background-color: #000;
top: 0;
border-radius: 0 0 5px 5px;
}
}
`,
const SmartLink = ({ href, test, children, ...props }) => {
const router = useRouter();
const isActive = test ? new RegExp(test, 'g').test(router.pathname) : false;
return (
<Link
href={href}
{...props}
>
<a
className={
isActive
? `${styles.barItem} ${styles.barItemSelected}`
: styles.barItem
}
>
{children}
</a>
</Link>
);
};
I can't solve this... does anyone have any suggestions on how I can do it?
The code above is not clear but I'll try to write a pattern in which styled components are used.
styled component
import styled from "styled-components";
const BarItem = styled.a `
position: relative;
display: block;
height: 3rem;
text-decoration:
none;
cursor: pointer;
border: 0;
`;
const BarItemSelected = styled.a`
font-weight: 500;
color: var(--dark-text-color);
filter: invert(1);
&:after {
content: '';
position: absolute;
display: block;
width: 100%;
height: 5px;
background-color: white;
border-radius: 5px 5px 0 0;
bottom: 0;
#media (max-width: 63.8rem) {
color: var(--dark-text-color);
filter: invert(1);
background-color: #000;
top: 0;
border-radius: 0 0 5px 5px;
}
}
`;
Then in the component
import { NavLink} from "react-router-dom";
return (
<NavLink className={isActive
? BarItemSelected
: BarItem} to={href}>
>
{children}
</a>
</NavLink>
);
Please try the above code, if it does'nt work please comment, I'll make the neccessary changes.
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'm trying to return a number of divs and dynamically place them in a grid. I've never tried this before, and I think my syntax may be off. None of the divs are appearing. The template is working, and the divs should currently fill grid container and turn it black with a button.
export const DayColumn = ({ day }) => {
const { timeColumn } = useTableContext();
return (
<Wrapper gridInterval={timeColumn.length}>
<h2>{day}</h2>
{timeColumn.forEach((_, index) => {
index++;
return (
<div
key={index}
className='task-slot'
style={{ gridArea: `${index + 1} / 1 / ${index + 2} / 2;` }}
>
<h1>text</h1>
<BsPlusSquareFill />
</div>
);
})}
</Wrapper>
);
};
The styled component
const Wrapper = styled.div`
height: 100%;
display: grid;
grid-template-columns: 1fr;
grid-template-rows: ${(props) => `100px repeat(${props.gridInterval}, 1fr);`};
grid-gap: 3px;
background-color: var(--clr-background-dark3);
border-radius: 7px;
h2 {
justify-self: center;
font-family: 'Oswald', sans-serif;
letter-spacing: 4px;
font-size: 2rem;
font-weight: 200;
color: var(--clr-text-light);
text-transform: capitalize;
}
.task-slot {
height: 100%;
width: 100%;
background-color: black;
}
`;
I fixed it. Needed to use map instead of forEach
i'm trying to se an element active with a different color, but its not working.Someone could help me ? And if it works, probably every element will change the color, how could i do it with something like "this", or any other.
Thats my element and my state:
//-> my state: I used true as default because i was trying to do it works, but i failed
export default function VertNavigation() {
const [active, setActive] = useState(true);
console.tron.log(active);
return (
<Container>
<button type="button">DEPOSITAR</button>
<QuickNavi>
<VerticalNavigation>
<Title>ACESSO RÁPIDO</Title>
<li>
<Icon.MdMonetizationOn size={20} />
<p>Emitir Cobrança</p>
</li>
<li>
<Icon.GoGraph size={20} active={active} />
<p>Gestão de cobrança</p>
</li>
<li>
<Icon.MdCompareArrows size={20} />
<p>Tranferencia</p>
</li>
<li>
<Icon.FaBarcode size={20} />
<p>Pagamentos</p>
</li>
// -> my styled component -- its always in "else", i don't know why
export const VerticalNavigation = styled.ul`
width: 100%;
height: 100%;
li:nth-child(4)::after {
content: 'novo';
right: 0;
margin-left: 6px;
text-align: center;
font-size: 12px;
top: 10px;
width: 45px;
height: 15px;
background: #47b248;
color: #fff;
border-radius: 10px 10px 10px 10px;
}
li {
width: 100%;
height: 45px;
display: flex;
align-items: center;
cursor: pointer;
&:hover svg {
transform: translateY(-5px);
color: #47b248;
}
svg {
transition: 0.3s ease;
color: ${props => (props.active ? '#47B248' : '#939393')};
}
p {
padding-left: 15px;
font-size: 15px;
color: ${darken(0.5, '#A6A6A5')};
}
}
`;
Thank you in advance.
The problem was my Icon like the guys said. I had to create a li component and pass my prop for him, then it works.
Thank you everyone for help me.
->index.js
<Item active={active}>
<Icon.GoGraph size={20} />
<p>Gestão de cobrança</p>
</Item>
->styles
export const Item = styled.li`
width: 100%;
height: 45px;
display: flex;
align-items: center;
cursor: pointer;
svg {
transition: 0.3s ease;
color: ${props => (props.active ? '#47B248' : '#939393')};
}