I have a styled component that will recieve a prop so it tells it if it should give it a margin-left or right.
I think I am having a syntax problem
I will paste some code:
const FormDiv = styled.div`
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
height: 100vh;
flex: 1;
position: relative;
${({ left }) =>
css`
*** margin${'-'}${left ? 'right' : 'left'}: 30vw; ***
`};
#media ${device.mobileS} {
height: 100%;
flex-grow: 1;
}
#media ${device.tablet} {
height: 100vh;
width: 100%;
}
`;
export default FormDiv;
When I try to pass left or right inside the component it doesnt take any sort of margin. What can be done to fix the syntax of the bold sentence
From https://styled-components.com/docs/faqs#can-i-nest-rules
const FormDiv = styled.div`
...
${props => props.left ? "margin-right" : "margin-left"}: 30vw;
...
`
or
${props => props.left
? 'margin-right: 30vw;'
: 'margin-left: 30vw;'}
or
${props => props.left
? css`margin-right: 30vw;`
: css`margin-left: 30vw;`}
or
margin-right: 30vw;
${props => props.left && css`
margin-right: unset;
margin-left: 30vw;`}
Related
Im trying to make a carousel with arrows. for the arrows to be in the right position and look pretty, im using a negative margin (margin: -Npx).
This causes the arrow to be hidden inside the carousel.
ive trying applying z-index: 9999.
overflow-x of carousel cannot be visible (per design)
const CarouselWrapper = styled.div`
display: flex;
flex-wrap: nowrap;
overflow-x: hidden;
position: relative;
scroll-snap-type: x mandatory;
&::-webkit-scrollbar {
display: none;
}
& > * {
scroll-snap-align: start;
}
`;
const ArrowsContainer = styled.div`
display: flex;
align-items: center;
position: absolute;
width: 100%;
justify-content: space-between;
top: 50%;
transform: translateY(-50%);
pointer-events: none;
`;
const ArrowWrapper = styled.div`
background: white;
border-radius: 50%;
display: flex;
opacity: 0.7;
padding: ${rem(8)};
pointer-events: auto;
box-shadow: 0px 10px 6.2px -4.95px rgba(0, 0, 0, 0.06),
0px 0px 10.2px 0.55px rgba(0, 0, 0, 0.02);
visibility: ${({ show }) => (show ? 'visible' : 'hidden')};
&:first-child {
margin-left: ${rem(-20)};
}
`;
const CarouselContainer = styled.div`
position: relative;
`;
<CarouselContainer>
<CarouselWrapper ref={ref}>{children}</CarouselWrapper>
{showArrows && (
<ArrowsContainer>
<ArrowWrapper
show={scrollPosition !== 0}
onClick={() => scrollToNext(ref.current, -1)}
>
<ChevronLeft style={{ width: 24, height: 24 }} />
</ArrowWrapper>
<ArrowWrapper
show={scrollPosition !== maxScrollValue}
onClick={() => scrollToNext(ref.current)}
>
<ChevronRight style={{ width: 24, height: 24 }} />
</ArrowWrapper>
</ArrowsContainer>
)}
</CarouselContainer>
Seems the
`&:first-child {
margin-left: ${rem(-20)};
}`
has an effect on both the left and the right arrows as you are targeting in both cases the <ChevronLeft /> and the <ChevronRight /> with the &:first-child selector. You can remove this from the ArrowWrapper styled component and add the margin in the style tag inside the <ChevronLeft /> and the <ChevronRight />
I'm building the website for the web development company I just registered (which is also intended to be part of my portfolio for job applications) and on my portfolio page, I'm adding a visual list of websites that I've completed for clients, and I'm using display: flex; and align-items: center; to for the wrapper, but they don't seem to be perfectly aligned, the gap on the left is bigger than the gap on the right, and it's more prominent in a mobile view:
Here are the styled-components I'm using below the header:
import React from 'react';
import styled, { keyframes } from 'styled-components';
import { Link } from 'react-router-dom';
import { fadeInUp } from 'react-animations';
export const PortfolioContainer = styled.div`
min-height: 100vh;
width: 100vw;
padding-top: 110px;
`
export const PortfolioHeader = styled.h1`
display: flex;
justify-content: center;
color: ${props => props.txtColor};
`
export const PortfolioWrapper = styled.div`
display: flex;
flex-direction: column;
align-items: center;
width: 100%;
background: transparent;
padding-top: 15px;
`
export const PortfolioLinkWrap = styled.div`
width: 90%;
height: 80px;
background: ${props => props.background};
border-radius: 15px;
animation: ${props => `${props.num/2}s`} ${keyframes `${fadeInUp}`};
margin-bottom: 10px;
`
export const PortfolioLinkImg = styled.img`
height: 80px;
border-radius: 15px;
`
export const PortfolioLink = styled(Link)`
color: ${props => props.txtcolor};
width: 100%;
height: 80px;
text-align: center;
text-decoration: none;
display: grid;
grid-template-columns: 80px 1fr;
grid-gap: 10px;
align-items: center;
justify-content: center;
transition: 0.3s ease-in-out;
border-radius: 15px;
&:hover {
color: ${props => props.txthovercolor};
background: ${props => props.hoverbackground};
transition: 0.3s ease-in-out;
}
`
And here is the React component:
import React from 'react'
import content from './content.js'
import {
PortfolioContainer,
PortfolioLinkWrap,
PortfolioHeader,
PortfolioWrapper,
PortfolioLink,
PortfolioLinkImg,
} from "./PortfolioElements";
const Portfolio = ({
highlightTxtColor,
elementBg,
elementBg2,
siteText
}) => {
return (
<PortfolioContainer>
<PortfolioHeader txtColor={highlightTxtColor}>
Portfolio
</PortfolioHeader>
<PortfolioWrapper>
{content.map((e,i) => (
<PortfolioLinkWrap
key={e.id}
background={elementBg2}
num={i+1}
>
<PortfolioLink
to={e.link}
target='_blank'
txtcolor={siteText}
txthovercolor={highlightTxtColor}
hoverbackground={elementBg}
>
<PortfolioLinkImg
src={e.img}
/>
{e.text}
</PortfolioLink>
</PortfolioLinkWrap>
))}
</PortfolioWrapper>
</PortfolioContainer>
)
}
export default Portfolio
UPDATE: I figured out that it's because the PortfolioContainer element is wider than the screen. However it's set to width: 100vw; so I'm not sure why that is. I tried setting both the header and the PortfolioWrap element do display: none; to make sure neither of those were affecting it, but it didn't make a difference.
Actually the elements are centered in flex container, But PortfoloioContainer's width is wider than the screen.
Add max-width:100% to your PortfoloioContainer. This will fix the issue.
Hope it helps!
Here is my example where I need to put the first component in front of the second.
Currently the second component is in front of the first despite z-index. I tried also to put style on the component tag but it does not work. Where is my mistake ?
First component:
import styled from "styled-components";
const Container = styled.div`
position: relative;
display: flex;
justify-content: center;
align-items: center;
height: 500px;
z-index: 100;
`;
function Aaa() {
return (
<Container>asd</Container>
)
}
export default Aaa;
Second component
import styled from "styled-components";
const Container = styled.div`
position: relative;
display: flex;
justify-content: center;
align-items: center;
height: 500px;
margin-top: -200px;
background: pink;
z-index: 1;
`;
function Bbb() {
return (
<Container>qwe</Container>
)
}
export default Bbb;
App:
function App() {
return (
<>
<Aaa />
<Bbb />
</>
);
}
export default App;
You need position: relative.
Note: z-index only works on positioned elements (position: absolute, position: relative, position: fixed, or position: sticky) and flex items (elements that are direct children of display:flex elements).
https://www.w3schools.com/cssref/pr_pos_z-index.asp
E.g.
import styled from "styled-components";
const Container = styled.div`
position: relative;
display: flex;
justify-content: center;
align-items: center;
height: 500px;
margin-top: -200px;
background: pink;
z-index: 1;
`;
function Bbb() {
return (
<Container>qwe</Container>
)
}
export default Bbb;
I dont know why it not work,this seems no reason.But what ever, maybe you could use this instead:
import styled from "styled-components";
const Container = styled.div`
position: relative;
display: flex;
justify-content: center;
align-items: center;
height: 500px;
transform: translateY(0px);
`;
function Aaa() {
return (
<Container>asd</Container>
)
}
export default Aaa;
Try adding a container for the components instead of fragment and apply display: flex and flex-direction: column on that container and see if it works. Edit: Code sandbox with fix: https://codesandbox.io/s/floral-frog-fie10?file=/src/Aaa.js
I tried to use antdesign drawer in react and it doesnt scroll properly on safari.
Currently my code looks like.
<Drawer
placement="right"
closable={!!fullCheckout}
onClose={() => setVisible(false)}
visible={visible}
getContainer={false}
style={{
position: "absolute",
height: `calc(100vh - ${view === "MobileView" ? "50px" : "55px"})`,
top: `${view === "MobileView" ? 0 : "55px"}`,
}}
width={fullCheckout ? "100%" : 455}
>
<CheckoutDrawContainer>
<TopContainer />
<BottomContainer />
</CheckoutDrawContainer>
</Drawer>
The issue is the scroll is not working properly on safari, iphone.
export const CheckoutDrawerContainer = styled.div`
display: flex;
flex-direction: column;
position: relative;
-webkit-overflow-scrolling: touch !important;
height: ${({ view }) => (view !== "MobileView" ? "calc(100vh - 50px)" : "")};
`;
export const CheckoutDrawerTopContainer = styled.div`
background-color: ${primary[0]};
height: 258px;
padding: 0 21px;
padding-top: 27px;
z-index: 9;
`;
export const CheckoutDrawerBottomContainer = styled.div`
background-color: white;
padding: 0 21px;
padding-top: 80px;
height: 500px;
`;
I think it is related to the vh on safari, iphone.
Thanks in advance
I am trying to make the transition slowly (500ms) scale the Brandsdiv when props.pop changes. pop will equal true or false. Currently, transform: ${props => (props.pop ? "scale(1.2)" : "scale(1)")}; works fine and scales the div when pop = true but the transition is not working - the scaling abruptly changes.
import React from 'react'
import styled from 'styled-components'
const LogoImg = styled.img`
max-width: 100%;
padding: 5px;
`
export default function FeaturedManufacturerLink(props) {
const {
brandPagePath,
logo,
pop
} = props
const Brandsdiv = styled.div`
transition: transform 500ms;
display: flex;
width: 116px;
height: 85px;
border-radius: 50%;
margin: 25px 35px;
align-items: center;
text-align: center;
transform: ${props => (props.pop ? "scale(1.2)" : "scale(1)")};
`
return (
<Brandsdiv pop={pop}>
<a href={brandPagePath}>
<LogoImg src={logo} />
</a>
</Brandsdiv>
)
}
I moved const Brandsdiv. The prop change pop was causing the component to rerender.