Im having a hard time centering a text with awesome font icon, and also centering the icons themselves.
Im using styled components like so:
const StyledIcon = styled(FontAwesomeIcon)`
width: 50px;
display: flex;
justify-content: center;
font-size: 30px;
margin-left: 50px;
`;
const Text = styled.div`
font-size: 13px;
display: flex;
justify-content: center;
`;
and in my component I have the following
<StyledIcon icon={icon1} />
<Text>Charts + Graphs</Text>
<StyledIcon icon={icon2} />
<Text>Classes</Text>
<StyledIcon icon={icon3} />
<Text>Student Information</Text>
<StyledIcon icon={icon4} />
<Text>Knowledge Database</Text>
<StyledIcon icon={icon5}/>
<Text>Class Notes</Text>
This is how it currently looks, any suggestions on how to center text & icon so that they appear in the center of the shaded box?
Use flexbox.
const WrapperAroundIconsAndText = styled.div`
display: flex;
flex-direction: column;
align-items: center;
`;
Related
A scroll bar keeps showing next to my div in all of my project, I have tried to implement and overflow: hidden to its parent but it did not work. I have this problem in other parts of my project also.
import React from 'react'
import "./ContactMe.scss"
export default function ContactMe() {
return (
<div className='contactMe' id='contactMe'>
<div className="left"></div>
<div className="information">
<div className="wrapper">
<h1>Let's discuss your Project!</h1>
<h2>Phone</h2>
<h2>email</h2>
</div></div>
<div className="form">.</div>
</div>
)
}
#import "../../global.scss";
.contactMe{
display: flex;
justify-content: center;
align-items: center;
.left{
position: relative;
left: 0;
width: 2rem;
height: 100%;
background-color: $text;
}
.information{
display: flex;
align-items: center;
justify-content: center;
flex: 0.4;
.wrapper{
display: flex;
flex-direction: column;
align-items: center;
margin-left: 2rem;
h1{
font-size: 5rem;
}
h2{
}
}
}
.form{
flex: 0.6;
background-color: brown;
}
}
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!
Can't figure out how to center 2 buttons horizontally with styled-components.
Below is my code.
Tried many ways to center, but didn't work.
import React from "react"
import styled from "styled-components"
const HomeStyles = styled.div`
h1 {
font-size: 1.5em;
text-align: center;
color: royalblue;
}
button {
font-size: 1em;
margin: 1em;
padding: 0.25em 1em;
border: 2px solid royalblue;
border-radius: 3px;
color: royalblue;
}
`
export default function Home() {
return (
<HomeStyles>
<h1>Title</h1>
<button>Button1</button>
<button>Button2</button>
</HomeStyles>
)
}
UPDATE: I need to center buttons horizontally
Have you tried using flexbox on parent element?
const HomeStyles = styled.div`
display: flex;
flex-direction: column;
justify-items: center;
align-items: center;
....
`;
const ButtonsWrapper = styled.div`
display: flex;
justify-items: center;
align-items: center;
`;
<HomeStyles>
<h1>Title</h1>
<ButtonsWrapper>
<button>Button1</button>
<button>Button2</button>
</ButtonsWrapper>
</HomeStyles>
I am trying to vertically align two set of rows, each of which contains an image on one side, and text on the other side. Although I have experience with using flex to align vertically by using the code below, seems like in this particular situation I have to use something different:
justify-content: center;
flex-direction: column;
text-align: center;
This is what I am trying to achieve (Note that the red box is the image while the gray box is the text):
However, I am getting the situation below, with the text not vertically centered but top aligned with the image:
This is how the DOM structure looks like (ReactJS):
<LandingPinkDiv>
<Grid container spacing={24}>
<Grid item xs={12}>
<LandingTitleWhite>Title</LandingTitleWhite>
</Grid>
<LandingRowDiv>
<Grid item xs={6}>
<LandingImageDiv>
<LandingImage
src={1}
width="320px"
height="304px"
/>
</LandingImageDiv>
</Grid>
<Grid item xs={6}>
<LandingTextContainer>
<LandingSubheadingWhite>
Subheading
</LandingSubheadingWhite>
<LandingSubtitleBlack>
SubTitle
</LandingSubtitleBlack>
</LandingTextContainer>
</Grid>
</LandingRowDiv>
<LandingRowDiv>
<Grid item xs={6}>
<LandingTextContainer>
<LandingSubheadingWhite>
SubHeading
</LandingSubheadingWhite>
<LandingSubtitleBlack>
Subtitle
</LandingSubtitleBlack>
</LandingTextContainer>
</Grid>
<Grid item xs={6}>
<LandingImageDiv>
<LandingImage
src={2}
width="320px"
height="197px"
/>
</LandingImageDiv>
</Grid>
</LandingRowDiv>
</Grid>
</LandingPinkDiv>
The CSS counterpart is like this:
export const LandingRowDiv = styled.div`
display: flex;
/* justify-content: center;
flex-direction: column;
text-align: center; */
margin-bottom: 10%;
padding-left: 10%;
padding-right: 10%;
`;
export const LandingPinkDiv = styled.div`
display: flex;
justify-content: center;
flex-direction: column;
text-align: center;
height: 170vh;
background: #e72564 !important;
`;
export const LandingTextContainer = styled.div`
display: flex;
justify-content: center;
flex-direction: column;
text-align: center;
margin-right: 10%;
`;
You need to add align-items: center to your LandingRowDiv styled component:
export const LandingRowDiv = styled.div`
align-items: center;
display: flex;
justify-content: center;
flex-direction: row;
text-align: center
margin-bottom: 10%;
padding-left: 10%;
padding-right: 10%;
`;
You should use align-items: center; in 'LandingRowDiv' styled-component.
Not sure I get it right but you could consider the following html
<figure>
<img src="" alt="">
<figcaption>
<p>Text</p>
</figcaption>
</figure>
And then the following css
figure {
display: flex;
width: 100%;
}
figure img {
width: 50%;
}
figure figcaption {
display: flex;
justify-content: center;
align-items: center;
width: 50%;
}
(you can use align-self on p instead of align-items)
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