In the following, all the properties of Button are overriding the properties of PillButton except background. I've tried background-color with the same result. Only adding !important to background works.
const { white, darkGrey } = theme.colors;
export const PillButton = styled.button`
align-items: center;
background: ${p => (p.selected ? white : darkGrey)};
border-radius: 25px;
border: none;
color: ${p => (p.selected ? darkGrey : white)};
cursor: pointer;
display: flex;
justify-content: center;
padding: 8px 16px;
white-space: nowrap;
:hover {
background: ${white};
color: ${darkGrey};
}
`;
const Button = styled(PillButton)`
text-transform: uppercase;
font-weight: 700;
font-size: 13px;
background: ${p =>
p.selected ? theme.colors.draftedBlue : theme.colors.midGrey};
font-family: "Roboto Condensed", sans-serif;
`;
Why isn't background working?
Related
This is my cart component code. I am using styled components.
import React from "react";
import styled from "styled-components";
import { useSelector, useDispatch } from "react-redux";
import { remove } from "../../features/cartSlice";
const Cart = () => {
const pizzaProducts = useSelector((state) => state.cart);
const dispatch = useDispatch();
console.log(pizzaProducts);
const handleRemove = (id) => {
dispatch(remove(id));
};
return (
<CartContainer>
<CartHeading>Your cart</CartHeading>
<CartWrapper>
{pizzaProducts.map((pizzaProduct, index) => {
return (
<CartCard key={index}>
<CartImg src={pizzaProduct.img} alt="err" />
<CartInfo>
<CartTitle>{pizzaProduct.name}</CartTitle>
<CartDescription>{pizzaProduct.desc}</CartDescription>
<CartPrice>{pizzaProduct.price}</CartPrice>
<CartButton
id="btn"
onClick={() => handleRemove(pizzaProduct.id)}
>
Remove
</CartButton>
</CartInfo>
</CartCard>
);
})}
</CartWrapper>
</CartContainer>
);
};
const CartContainer = styled.div`
height: 100vh;
width: 100%;
min-width: 100vh;
min-height: 100%;
background: #000;
#media screen and (max-width: 400px) {
width: 100%;
}
`;
const CartHeading = styled.h2`
height: 40px;
padding: 30px 0;
text-align: center;
padding-top: 5rem;
margin-bottom: 2rem;
color: white;
font-size: clamp(2rem, 2.5vw, 3rem);
letter-spacing: 4px;
text-transform: uppercase;
`;
const CartWrapper = styled.div`
display: flex;
flex-wrap: wrap;
padding: 10px 0;
justify-content: center;
`;
const CartCard = styled.div`
margin: 0 3rem;
width: 400px;
min-width: 400px;
line-height: 2;
`;
const CartImg = styled.img`
height: 400px;
min-width: 400px;
box-shadow: 8px 8px #fdc500;
`;
const CartInfo = styled.div`
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
padding: 1.5rem 0;
`;
const CartTitle = styled.h2`
font-weight: 400;
font-size: 1.5rem;
color: white;
word-spacing: 1px;
letter-spacing: 3px;
`;
const CartDescription = styled.p`
margin-bottom: 1rem;
color: white;
margin: 20px 0;
font-size: 20px;
text-align: center;
word-spacing: 1px;
letter-spacing: 3px;
`;
const CartPrice = styled.p`
margin-bottom: 1rem;
font-size: 2rem;
color: white;
word-spacing: 1px;
letter-spacing: 3px;
`;
const CartButton = styled.button`
font-size: 1rem;
padding: 1rem 4rem;
border: none;
background: #e31837;
color: #fff;
transition: 0.2 ease-out;
&:hover {
background: #ffc500;
transition: 0.2s ease-out;
cursor: pointer;
color: #000;
}
`;
export default Cart;
I am expecting the full height 100%.
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'm trying to make toggle menu by using state. I want to hide component when the value of state is false. So I made conditional rendering in styled-component but there is an error. It says "'isChecked' is not defined no-undef". I want to fix this error but don't know how to fix it and where is wrong. I'd appreciate it if you let me know Thanks!
This is my code. The cord was long, so I erased the irrelevant part. It's still a long code, but I think you just need to look at the part I commented on
import React, { useState } from 'react'
import styled from 'styled-components';
const Body3LeftStart = styled.div`
flex-basis: 66.66666667% !important;
max-width: 66.66666667%;
box-sizing: border-box;
flex: 0 0 auto;
padding-left: 8px;
padding-right: 8px;
`
const Body3LeftSection = styled.div`
margin-bottom: 8px;
font-size: 1rem;
font-weight: 400;
line-height: 1.5;
color: #000a12;
box-sizing: border-box;
#Body3Section1 {
display: flex;
align-items: flex-end;
margin-bottom: 8px;
}
#Body3Section1::before {
display: block;
margin-top: -71px;
padding-top: 71px;
visibility: hidden;
content: " ";
z-index: 0;
}
#Body3Section1Span {
margin-right: 8px;
line-height: 1.45;
letter-spacing: -.3px;
color: #343a40;
font-size: 22px;
font-weight: 700;
}
#Body3Section1Span2 {
line-height: 1.5;
letter-spacing: -.3px;
font-size: 16px;
color: #adb5bd;
font-weight: 500;
}
`
const Body3LeftSection2 = styled.div`
display: flex;
margin-bottom: 20px;
align-items: flex-end;
#Body3LeftSection2Text {
font-weight: 400;
line-height: 1.47;
letter-spacing: -.3px;
font-size: 15px;
margin-right: 12px;
color: #495057;
word-break: keep-all;
}
`
const Body3LeftToggle = styled.div`
overflow: hidden;
border: 1px solid #e9ecef;
border-radius: 4px;
`
const Body3LeftToggle1 = styled.div`
box-sizing: border-box;
font-size: 1rem;
font-weight: 400;
line-height: 1.5;
`
const Body3LeftToggleTitle = styled.div`
border-top: unset;
display: flex;
align-items: center;
padding: 15px 20px;;
border-bottom: 1px solid #f1f3f5;
background-color: #f8f9fa;
cursor: pointer;
#Body3LeftToggleButton {
display: inline-flex;
margin-right: 8px;
width: 16px;
height: 16px;
align-items: center;
justify-content: center;
transition: background-color .15s ease;
}
`
const Body3LeftToggleTitleText = styled.div`
line-height: 1.47;
letter-spacing: -.3px;
font-size: 15px;
color: #343a40;
font-weight: 700;
font-style: inherit;
`
const Body3LeftToggleTitleText2 = styled.div`
font-weight: 400;
line-height: 1.47;
letter-spacing: -.3px;
font-size: 15px;
margin-left: auto;
color: #343a40;
`
//This is the component I want to put in a toggle. I used conditional rendering here.
const Body3LeftToggleContent = styled.div`
max-height: 50px;
overflow: hidden;
${isChecked===false}{
display: none;
}
`
const Body3LeftToggleContentWrap = styled.div`
display: flex;
align-items: center;
padding: 14px 20px;
`
function Body3Left() {
// I made useState here
const [isChecked,setChecked] = useState(false)
return (
<Body3LeftStart>
<Body3LeftSection>
<div id='Body3Section1'>
<span id='Body3Section1Span'>
커리큘럼
</span>
<span id='Body3Section1Span2'>
총 39
개 ˙ 5시간 2분의 수업
</span>
</div>
<Body3LeftSection2>
<span id='Body3LeftSection2Text'>
이 강의는 영상, 수업 노트가 제공됩니다. 미리보기를 통해 콘텐츠를 확인해보세요.
</span>
<button id='Body3LeftSection2Button'>
모두 접기
</button>
</Body3LeftSection2>
<Body3LeftToggle>
<Body3LeftToggle1>
<Body3LeftToggleTitle>
// I used button here. I erased it because the svg code was long, but there is an arrow picture in it. I changed the value every time I pressed the button
<span id='Body3LeftToggleButton'>
<svg onClick={()=>{setChecked(!isChecked)}} style={{display:isChecked===true&&'none' ,width:'16', height:'16'}}></svg>
<svg onClick={()=>{setChecked(!isChecked)}} style={{display:isChecked===false&&'none' ,width:'16', height:'16'}}></svg>
</span>
<Body3LeftToggleTitleText>
섹션 0. 소개
</Body3LeftToggleTitleText>
<Body3LeftToggleTitleText2>
1강 ∙ 4분
</Body3LeftToggleTitleText2>
</Body3LeftToggleTitle>
<Body3LeftToggleContent>
<Body3LeftToggleContentWrap>
<span id='Body3LeftToggleContentText1'>
강의 소개
</span>
<span id='Body3LeftToggleContentText2'>
<span id='Body3LeftToggleContentText3'>
04:41
</span>
</span>
</Body3LeftToggleContentWrap>
</Body3LeftToggleContent>
</Body3LeftToggle1>
</Body3LeftToggle>
</Body3LeftSection>
</Body3LeftStart>
)
}
export default Body3Left;
you have to pass the state as props to the styled component as
const Body3LeftToggleContent = styled.div`
max-height: 50px;
overflow: hidden;
display: ${props => props.isChecked ? "block" : "none"}; // get prop value as so
`;
from the JSX as
</Body3LeftToggleTitle>
<Body3LeftToggleContent isChecked={isChecked}> // like so
<Body3LeftToggleContentWrap>
only added the parts of the code to alter ....
for reference on passing props
There's a weird bug in my application to causes some CSS properties to disappear. When I sign-in into my application, I used <Redirect to="/home"/> to go to my home page. And then some images disappear and some button are half the size they suppose to be. When I refresh the browser, page gets back to what it supposes to be. I'm using styled component mainly, and below are some pictures:
after signin, wrong version
after refresh page, correct version
here is the complete codehttps://github.com/aojiaooo/shopaholic-react-app
To run the code, you have to change SignIn.js function below:
async function loginUser(credentials) {
return "someRandomCookieOfYourChoice";
//below was the original request to backend
/**
return await axios.post('http://localhost:8080/signin', credentials)
.then(response => response.data.code === 0 ? response.data.data.value : null);
*/
}
Have being frustrated the whole day ... Any help would be greatly appreciated. I'm a backend guy and this is my first day trying out React. Thanks in advance!
import styled from "styled-components";
import { Link } from "react-router-dom";
//general layout for shopaholic
export const SectionWrapper = styled.section`
box-shadow: 0 0 5px #ccc;
padding: 15px 10px;
max-width: 1200px;
margin: 0 auto;
box-sizing: border-box;
-moz-osx-font-smoothing: grayscale;
`
// style for header
export const HeaderWrapper = styled.header`
min-height: 70px;
display: flex;
justify-content: space-around;
align-items: center;
overflow: hidden;
.menu, .close{
cursor: pointer;
display: none;
}
.hello {
display: inline-block;
padding: 10px 10px 15px 15px;
height: 20px;
margin-left: -50px;
}
#media (max-width: 1000px){
ul{
position: fixed;
top:0;
left: -100%;
width: 100%;
height: 100vh;
display: flex;
justify-content: space-around;
align-items: center;
flex-direction: column;
background: white;
z-index: 99;
opacity: 0.97;
transition: 0.5s linear;
margin-left: -20px;
}
.menu, .close{
display: block;
}
.close{
position: relative;
}
ul.toggle{
left: 0;
}
}
`
export const HeaderLogoLink = styled(Link)`
font-size: 2em;
font-weight: bold;
text-decoration: none;
text-transform: uppercase;
color: black;
display: block;
padding-left: 30px;
`
export const HeaderNavWrapper = styled.nav`
display: flex;
padding-right: -100px;
ul li a:hover{
color: darkgray;
}
ul li a{
text-decoration: none;
text-transform: uppercase;
color: #555;
padding: 0 15px;
}
ul li{
list-style: none;
display: inline-block;
}
`
// style for home page
export const ProductListWrapper = styled.div`
width: 100%;
display: flex;
justify-content: space-evenly;
align-content: flex-start;
flex-wrap: wrap;
`
export const CardWrapper = styled.div`
min-width: 300px;
min-height: 400px;
border: 1px solid #eee;
overflow: hidden;
padding: 10px;
box-shadow: 2px 8px 20px #ddd;
margin: 10px 15px;
transition: 0.5s linear;
box-sizing: border-box;
font-family: 'Georgia', sans-serif;
display: block;
`
export const CardInfoWrapper = styled.div`
margin: 10px 15px;
text-decoration: none;
a{
text-decoration: none;
color: #333;
}
a:hover{
color: darkblue;
}
`
export const CardImageWrapper = styled.img`
max-width: 300px;
max-height: 300px;
display: inline-block;
color: white;
text-decoration: none;
padding: 10px 15px;
`
export const CardTextWrapper = styled.div`
padding: 0;
box-sizing: border-box;
font-family: 'Georgia', sans-serif;
line-height: 1.5;
margin: -5px 0;
-webkit-font-smoothing: antialiased;
`
export const CardTitleLinkWrapper = styled(Link)`
font-size: 1.5em;
font-weight: bold;
margin-bottom: 10px;
margin-top: -5px;
font-family: 'Segoe UI',serif;
display: inline-block;
-webkit-font-smoothing: antialiased;
`
export const CardDetailLinkWrapper = styled(Link)`
background: #333;
text-align: center;
width: 300px;
margin-left: 10px;
height: 25px;
padding-top: 15px;
padding-bottom: 10px;
font-size: 1em;
color: white;
text-decoration: none;
display: inline-block;
-webkit-font-smoothing: antialiased;
`
// style for detail page
export const ProductDetailWrapper = styled.div`
display: flex;
justify-content: space-around;
flex-wrap: wrap;
margin: 50px 0;
box-sizing: border-box;
`
export const DetailImageWrapper = styled.img`
max-width: 500px;
min-width: 290px;
height: 300px;
display: block;
object-fit: cover;
margin: 25px;
`
export const DetailInfoWrapper = styled.div`
max-width: 500px;
min-width: 290px;
margin: 25px;
`
export const DetailTitleWrapper = styled.div`
display: block;
font-size: 1.5em;
margin-block-start: 0.83em;
margin-block-end: 0.83em;
font-weight: bold;
box-sizing: border-box;
font-family: 'Segoe UI',serif;
letter-spacing: 1px;
`
export const DetailButtonWrapper = styled.button`
background: #333;
color: white;
text-decoration: none;
padding: 10px 35px;
margin-top: 30px;
display: inline-block;
font-family: 'Georgia', sans-serif;
`
export const DetailTextWrapper = styled.div`
box-sizing: border-box;
font-family: 'Georgia', sans-serif;
-webkit-font-smoothing: antialiased;
line-height: 1.5;
margin: 10px 0;
`
// style for alert box
export const AlertTextWrapper = styled.div`
font-family: '.AppleSystemUIFont', sans-serif;
-webkit-font-smoothing: antialiased;
`
I am not sure, but you may try this...
import styled from 'styled-components';
import { Link } from 'react-router-dom';
// general layout for shopaholic
export const SectionWrapper = styled.section`
box-shadow: 0 0 5px #ccc;
padding: 15px 10px;
max-width: 1200px;
margin: 0 auto;
box-sizing: border-box;
-moz-osx-font-smoothing: grayscale;
`;
// style for header
export const HeaderWrapper = styled.header`
min-height: 70px;
display: flex;
justify-content: space-around;
align-items: center;
overflow: hidden;
.menu,
.close {
cursor: pointer;
display: none;
}
.hello {
display: inline-block;
padding: 10px 10px 15px 15px;
height: 20px;
margin-left: -50px;
}
#media (max-width: 1000px) {
ul {
position: fixed;
top: 0;
left: -100%;
width: 100%;
height: 100vh;
display: flex;
justify-content: space-around;
align-items: center;
flex-direction: column;
background: white;
z-index: 99;
opacity: 0.97;
transition: 0.5s linear;
margin-left: -20px;
}
.menu,
.close {
display: block;
}
.close {
position: relative;
}
ul.toggle {
left: 0;
}
}
`;
export const HeaderLogoLink = styled(Link)`
font-size: 2em;
font-weight: bold;
text-decoration: none;
text-transform: uppercase;
color: black;
display: block;
padding-left: 30px;
`;
export const HeaderNavWrapper = styled.nav`
display: flex;
padding-right: -100px;
ul li a:hover {
color: darkgray;
}
ul li a {
text-decoration: none;
text-transform: uppercase;
color: #555;
padding: 0 15px;
}
ul li {
list-style: none;
display: inline-block;
}
`;
// style for home page
export const ProductListWrapper = styled.div`
width: 100%;
display: flex;
justify-content: space-evenly;
align-content: flex-start;
flex-wrap: wrap;
`;
export const CardWrapper = styled.div`
min-width: 300px;
min-height: 400px;
border: 1px solid #eee;
overflow: hidden;
padding: 10px;
box-shadow: 2px 8px 20px #ddd;
margin: 10px 15px;
transition: 0.5s linear;
box-sizing: border-box;
font-family: 'Georgia', sans-serif;
display: block;
`;
export const CardInfoWrapper = styled.div`
margin: 10px 15px;
text-decoration: none;
a {
text-decoration: none;
color: #333;
}
a:hover {
color: darkblue;
}
`;
export const CardImageWrapper = styled.img`
max-width: 300px;
max-height: 300px;
display: inline-block;
color: white;
text-decoration: none;
padding: 10px 15px;
`;
export const CardTextWrapper = styled.div`
padding: 0;
box-sizing: border-box;
font-family: 'Georgia', sans-serif;
line-height: 1.5;
margin: -5px 0;
-webkit-font-smoothing: antialiased;
`;
export const CardTitleLinkWrapper = styled(Link)`
font-size: 1.5em;
font-weight: bold;
margin-bottom: 10px;
margin-top: -5px;
font-family: 'Segoe UI', serif;
display: inline-block;
-webkit-font-smoothing: antialiased;
`;
export const CardDetailLinkWrapper = styled(Link)`
background: #333;
text-align: center;
width: 300px;
margin-left: 10px;
height: 25px;
padding-top: 15px;
padding-bottom: 10px;
font-size: 1em;
color: white;
text-decoration: none;
display: inline-block;
-webkit-font-smoothing: antialiased;
`;
// style for detail page
export const ProductDetailWrapper = styled.div`
display: flex;
justify-content: space-around;
flex-wrap: wrap;
margin: 50px 0;
box-sizing: border-box;
`;
export const DetailImageWrapper = styled.img`
max-width: 500px;
min-width: 290px;
height: 300px;
display: block;
object-fit: cover;
margin: 25px;
`;
export const DetailInfoWrapper = styled.div`
max-width: 500px;
min-width: 290px;
margin: 25px;
`;
export const DetailTitleWrapper = styled.div`
display: block;
font-size: 1.5em;
margin-block-start: 0.83em;
margin-block-end: 0.83em;
font-weight: bold;
box-sizing: border-box;
font-family: 'Segoe UI', serif;
letter-spacing: 1px;
`;
export const DetailButtonWrapper = styled.button`
background: #333;
color: white;
text-decoration: none;
padding: 10px 35px;
margin-top: 30px;
display: inline-block;
font-family: 'Georgia', sans-serif;
`;
export const DetailTextWrapper = styled.div`
box-sizing: border-box;
font-family: 'Georgia', sans-serif;
-webkit-font-smoothing: antialiased;
line-height: 1.5;
margin: 10px 0;
`;
// style for alert box
export const AlertTextWrapper = styled.div`
font-family: '.AppleSystemUIFont', sans-serif;
-webkit-font-smoothing: antialiased;
`;
Im not sure if this work with styled component!! The use of the !important on the style that is being ignored, or overridden in react. In normal css i will do it this way:
.selector{
background-color: red !important;
}
You can try this:
export const DetailButtonWrapper = styled.button`
background: #333 !important ;
`;
Im not certain about this answer but yiu can try it. !important on the style which are not applying
It turns out this problem happens when running the app using
npm start
however, the css issue goes away when doing npm run build and then serve -s build
I guess production wise this is not a bug but rather something wrong with the development environment, in case any one in the future has this problem, one can try build the project and see if the error goes away.
I am new to styled-component and I am getting an error stating :
Property 'icon' does not exist on type 'ThemeProps'.
I want to give an icon in props. For one icon it works. I don't know how to do it so that I can change it many times.
export const GenericInput = styled.input`
background-color: #f4f4f4;
width: 220px;
height: 47px;
border: none;
border-radius: 50px;
font-weight: 600;
font-size: 16px;
cursor: pointer;
letter-spacing: 1px;
padding: 15px 30px;
-moz-outline-radius: 50px;
outline: none;
${(Icon) =>
Icon && css`
background-image: url(${({ icon }) => icon});
background-size: 20px;
background-position: 10px 50%;
background-repeat: no-repeat;
color: #c7c7c7;
`
}
::placeholder {
color: #c7c7c7;
}
`;