I have the below components made with styled-components. I used to work fine with version 4.2.0. In order to cover my App with unit-tests, I upgraded styled-components to the version: 5.3.6.
After that, styled components stopped working on the "first render" when I am running a pre-compiled bundle. Under "development server" everything is still running normally.
However, when the page renders from a bundle, styles are missing. When I inspect the page, there is a style name my divs, and those styles do not exist.
My components are below:
import styled from 'styled-components';
export default styled.div`
text-align: center;
width: 46px;
min-height: 100vh;
flex-direction: column;
background-color: ${({ admin }) => (admin ? '#ffffff' : '#262626')};
overflow: hidden;
white-space: nowrap;
&:hover {
width: 250px;
text-align: left;
}
#media (max-width: 768px) {
display: none;
&.mobileOpen {
display: flex;
&:hover {
width: 46px;
text-align: left;
}
}
`;
export const MobileNavBar = styled.div`
#media (min-width: 769px) {
display: none;
}
#media (max-width: 768px) {
position: fixed;
z-index: 10;
text-align: center;
width: 100vw;
height: 60px;
flex-direction: row;
background-color: ${({ admin }) => (admin ? '#ffffff' : '#262626')};
overflow: hidden;
white-space: nowrap;
justify-content: space-between;
}
`;
export const MobileNavBarOpen = styled.div`
position: fixed;
top: 60px;
text-align: center;
width: 46px;
height: 100vh;
flex-direction: column;
background-color: ${({ admin }) => (admin ? '#ffffff' : '#262626')};
overflow: hidden;
white-space: nowrap;
padding-bottom: 100px;
&:hover {
width: 250px;
text-align: left;
}
#media (max-width: 768px) {
display: none;
&.mobileOpen {
display: flex;
&:hover {
width: 46px;
text-align: left;
}
}
`;
My best guess is that styles are generated, then there is a render, and the class name changes under this re-render. The new style-class name is different from the previous one, so my styles are not being associated with the components. I don't have SSR or anything fancy here, just building the bundle with CRA npm run build.
Interestingly, if I press the browser refresh button, the styles appear fine.
What could I do to fix this?
Related
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 am a complete begginer trying to make a responsive react app. My problem is that media queries don't work, and i can't figure out why.
$main-color: #b282ff;
$darker-main-color: #8A42FF;
$shadow-color: #d9c2ff;
$accent-color: #E8FFC2;
$main-font: "Libre Bakersville";
$secondary-font: "Bebas Neue";
* {
margin: 0 auto;
padding: 0;
box-sizing: border-box;
}
body {
font-size: 2em;
font-family: "Bebas Neue";
}
.navbar-container {
display: flex;
flex-direction: row;
align-items: center;
height: 10vw;
width: auto;
background: $main-color;
padding: 16px;
ul {
display: flex;
align-items: center;
justify-content: space-between;
flex-direction: row;
font-size: 2rem;
position: relative;
height: 100%;
li {
padding: 0 60px 0 60px;
list-style: none;
}
}
a{
color: white;
text-decoration: none;
&:visited {
color: white;
}
}
}
.navbar-menu-toggle{
display: none;
position: absolute;
padding: 10px;
color: #fff;
}
.navbar-logo {
font-size: 3rem;
a{
color: white;
text-decoration: none;
&:visited {
color: white;
}
}
}
.sticky {
position: -webkit-sticky;
position: sticky;
top: 0;
}
#media screen and (max-width:500px) {
.navbar-container{
flex-direction: column;
height: auto;
}
}
here is my scss. what i am trying to do is to make the list in the menu to display as a column istead of a row. While tdebugging i tried to switch the media queruies statements, just so it changes the background color, but it also did not work. What can i do?
I have a problem with height of my website. My component has
height: 100vh;
property but there is a moment when child component becomes really long- in that case height doesn't change and component lands somewhere below on white background. Is there any way to let main component know he has to use new height? I'm adding image to show it better.
Code sample as requested:
return (
<div className="App">
<Navbar></Navbar>
<Container id="maincontainer" maxWidth="xl" sx={{border: (theme) => `1px solid ${theme.palette.divider}`,bgcolor: 'background.paper',boxShadow: 5}}>
<div id="inputcontainer">
<StepperForm
></StepperForm>
</div>
<div id="outputcontainer">
<ThreeScene
></ThreeScene>
</div>
</Container>
</div>
);
css:
.App {
text-align: center;
background-color: rgb(177, 177, 177);
min-height: 100vh;
}
.App-header {
background-color: #000000;
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
font-size: calc(10px + 2vmin);
color: white;
width: 100%;
}
.App-link {
color: #61dafb;
}
#maincontainer {
height: 100vh;
min-height: 100vh;
overflow: auto;
}
#inputcontainer {
width: 50%;
float: left;
height: 100vh;
text-align: left !important;
box-shadow: none !important;
background-color: white !important;
min-height: 100vh;
}
#outputcontainer {
width: 50%;
float: right;
height: 100vh;
min-height: 100vh;
}
What bothers me too is that my navbar shadow is being hidden:
Why are you declaring height to 100vh every time. This makes page too big and your components rendered between them seperated by 100vh margin.dont use 100vh your page automatically set its height if you want you can do
height:'auto',
And also try to elaborate your question more. Like we can't help you in your boxShadow because we can't see the code of it, also add images that are understandable
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>
Sorry for my bad English. I have some difficulty accessing the children of a menu in styled component. This is my component I want to access the AccountMenuItem children, I want to apply a higher height to the first and last children, but I can not access the way and the way.
CodeSandbox
I tried many options, but to no avail:
These are the last ones.
&:nth-child(2) ${AccountMenuItem} {
height: 80px;
}
&${AccountMenuItem}:nth-child(2) {
height: 80px;
}
<AccountMenu>
{menuItems.map((item, indice) => {
return (
<AccountMenuItem key={indice}>
<MenuImage src={item.icon} alt={item.text} />
<MenuItem>{item.text}</MenuItem>
</AccountMenuItem>
)
})}
</AccountMenu
const AccountMenuItem = styled.span`
height: 40px;
color: ${props => props.theme.primary[100]};
display: flex;
align-items: center;
text-decoration: none;
background-color: ${props => props.theme.TextPalette[100]};
&:hover {
background-color: rgba(131, 0, 196, 0.05);
font-weight: bold;
}
`
const AccountMenu = styled.div`
display: inline-block;
visibility: hidden;
position: absolute;
bottom: -240px;
width: 198px;
right: 0;
z-index: 99999;
text-decoration: none;
background-color: #f1f1f1;
border-bottom: 5px solid ${props => props.theme.primary[100]};
border-bottom-left-radius: 4px;
border-bottom-right-radius: 4px;
#media only screen and (min-width: 720px) {
left: -55px;
bottom: -240px;
}
&:hover {
visibility: visible;
}
&::after {
content: '';
position: absolute;
bottom: 100%;
left: 90%;
margin-left: -10px;
border-width: 10px;
border-style: solid;
border-color: transparent transparent #12ff92 transparent;
#media only screen and (min-width: 720px) {
margin-right: 0;
height: 120px;
left: 50%;
}
}
&:nth-child(2) ${AccountMenuItem} {
height: 80px;
}
`
There are two solutions to this. I have implemented both solutions in this link, one by setting background of the second child to black, and another by setting the background of the third child to blue.
Code: https://codesandbox.io/s/determined-tree-0l1hs
The important bit is that you were missing a space between & and the child's identifier in your first example. It should be like this:
// v-- Space here!!
& ${AccountMenuItem}:nth-child(3) {
background: blue;
}
The difference of the space is the same as this difference in traditional CSS:
.account-menu.account-menu-item // means an element that has both classes
.account-menu .account-menu-item // means the second element is a descendant of the first
The other way to do this, which I prefer, is just define the rule in the AccountMenuItem instead of defining it in the parent. That way you can skip the weird inheritance stuff and apply the style directly. So in AccountMenuItem you just need this:
&:nth-child(2) {
background: black;
}