Closed. This question is not reproducible or was caused by typos. It is not currently accepting answers.
This question was caused by a typo or a problem that can no longer be reproduced. While similar questions may be on-topic here, this one was resolved in a way less likely to help future readers.
Closed 1 year ago.
Improve this question
Sorry to ask such a silly question but I'm a total rookie and I'm stuck in a tutorial.
I'm getting the following error when trying to run the below:
Attempted import error: 'NavLogo' is not exported from './NavbarElements'
Thank you in advance.
import styled from "styled-components";
import { Link as LinkR } from "react-router-dom";
// import { Link as LinkS } from "react-scroll";
export const Nav = styled.nav`
background: #000;
height: 80px;
margin-top: -80px;
display: flex;
justify-content: center;
align-items: center;
font-size: 1rem;
position: sticky;
top: 0;
z-index: 10;
#media screen and (max-width: 960px) {
transition: 0.8s all ease;
}
`;
export const NavbarContainer = styled.div`
display: flex;
justify-content: space-between;
height: 80px;
z-index: 1;
width: 100%;
padding: 0 24px;
max-width: 1100px;
`;
export const Navlogo = styled(LinkR)`
color: #fff;
justify-self: flex-start;
cursor: pointer;
display: flex;
align-items: center;
margin-left: 24px;
font-weight: bold;
text-decoration: none;
`;
looks like you have made a typo while exporting
your code:
export const Navlogo = ...........
should be:
export const NavLogo = .......
I think the correct title is "Can't import Const in React".
If you want to import non-default things, you must import with curly bracket ({ }). For example, to import Navlogo, import {Navlogo} from './NavbarElements'.
But if you have default export, i.e export default Navlogo;, you can do import Navlogo from './NavbarElements' and the imported object is const Navlogo. For import others const in NavbarElements file, you must do the first way with curly bracket
How are you importing NavLogo?
It should look something like this:
import { NavLogo } from './NavbarElements'; // Path to file
Related
I just wanted to know how to test this file using react-testing-library. I am using React Testing Library for first time and it seems very confusing.
import styled from 'styled-components';
export const Salutation = styled.div`
background: #f0f0f0;
font-size: 14px;
padding: 16px;
color: black;
a {
color: blue;
text-decoration: underline;
}
`;
export const Container = styled.div`
padding: 16px;
text-align: center;
`;
export const Header = styled.h3`
font-size: 1.15vw;
font-weight: bold;
padding-bottom: 16px;
`;
export const Label = styled.div`
text-align: left;
font-size: 0.9375vw;
`;
Before you ask the question "how", we need to understand "what" would you want to test in your React component with regard to styling?
One of the goals for writing tests would be to ensure that the UI doesn't change unexpectedly in the future. In that context, you can consider writing Snapshot Tests which involve taking a reference screenshot of the UI and at later points of time, comparing new versions of screenshots to the reference. This also ensures that any changes to the styling haven't been done inadvertently as the test would break.
I am now first using typescript and started toy-project.
But by beginning, it's exhausted.
Below is my code:
import styled, { css } from 'styled-components';
export const Card = styled.div`
${({ theme }) => css`
background-color: ${theme.colors.white};
border-radius: 15px;
display: flex;
flex: 1;
flex-direction: column;
max-height: fit-content;
padding: 13px;
`}
`;
But error message is shown as:
How to change code??
Please help.
I am creating a Tetris game and a created a component (StyledDisplay), which I an trying to import but I am getting an error for my Display.Js page that says the following:
Attempted import error: 'StyledDisplay' is not exported from
'./styles/StyledDisplay'.
I know it's a very dumb question, but can someone look at how I am importing and exporting it? I was fairly confident I was exporting the file and importing it the correct way, but a new set of eyes would not hurt.
This is how I have my Display.js folder, which is where I am importing:
import React from 'react';
import { StyledDisplay } from './styles/StyledDisplay';
const Display = ({ gameOver, text }) =>(
<StyledDisplay gameOver={gameOver}>{text}</StyledDisplay>
)
export default Display;
This is how I have my Displayed.Js folder, which is where I created the component:
import styled from 'styled-components';
export const StyledDisplayed = styled.div`
box-sizzing: border-box;
display: flex;
align-items: center;
margin: 0 0 20px 0;
padding: 20px;
border: 4px; solid #333;
min-height: 30px;
width: 100%;
border-radius: 20px;
color: ${props => (props.gameOver ? 'red' : '#999')};
background: #000;
font-family: Pixel, Arial, Helvetica, sans-seriff;
font-size: 0.8rem;
`;
This is how I have my files set up in Visual Studio Code:
Your export is named StyledDisplayed not StyledDisplay.
You also appear to have some additional typos like box-sizzing and sans-seriff.
Change export const StyledDisplayed to export const StyledDisplay.
P.S. You have misspellings in your CSS that might cause weird visuals.
I'm using the same styles of components below on two different components in ReactJS. I wanted to know if it is possible to use a kind of mixin storing in another file and export them, then just call them on each ReactJS component? This would avoid repetition of code.
// Repeated styles
const TitleInflow = styled.h1`
text-align: center;
margin-top: 70px;
padding-bottom: 50px;
`;
const Table = styled.table`
margin: 0 auto;
margin-top: 100px;
`;
const ThTable = styled.th`
padding-right: 20px;
padding-left: 20px;
padding-bottom: 10px;
`;
Soluce 1 : You can create a common file like :
Common.js
const Common = `
// style you want.
padding: 5px;
color: red;
`
export default Common
and add it in your styled components like
Components.js
import Common from './common'
const TitleInflow = styled.h1`
${Common};
text-align: center;
margin-top: 70px;
padding-bottom: 50px;
`;
Soluce 2 : You can create a component and extend it :
here a component to extend :
const Component = styled.p`
color: red;
fontSize: 12px;
`
extend style like :
const NewComponent = styled(Component)`
// new style you want.
display: flex;
`
and if you want extend style with an another html tag you can do like it when you will use it :
<NewComponent as="h1"/>
i'm trying to re-use and extend a styled-component with no luck. I suspect i haven't quite grasped how to properly use styled-components
I have a component that renders a chevron icon, based on what icon prop is passed to it. What i want to be able to do is export this component, then import it and extend its styles. ie - in this example remove its padding in Header.jsx:
Chevron.jsx
import React from 'react'
import styled from 'styled-components'
const StyledChevron = styled.i`
display: flex;
align-items: center;
justify-content: center;
padding: 14px;
cursor: pointer;
border-left: 1px solid #efefef;
transition: all .1s linear;
transform: rotate(0deg);
${props=>props.closed && ``};
&:hover {
background: #f7f4f4;
}
`
const Chevron = (props) => {
return (
<StyledChevron closed={props.item.closed} onClick={()=>{props.openSubMenu(props.item.id)}} className={props.icon}/>
)
}
export default Chevron
Header.jsx
import React from 'react'
import styled from 'styled-components'
import cssvars from '../../js/style/vars'
import Chevron from './Chevron'
const StyledHeader = styled.div`
display: flex;
align-items: center;
padding: 11px;
justify-content: space-between;
background: ${cssvars.primaryColor};
h2 {
font-size: 19px;
color: #fff;
display: flex;
align-items: center;
}
`
const BackChevron = Chevron.extend`
padding: 0
`
const Header = (props) => {
return (
<StyledHeader>
<h2>{props.item.title}</h2>
<BackChevron {...props} icon="icon-arrow-left"/>
</StyledHeader>
)
}
export default Header
With the above code, im getting console error: Uncaught TypeError: _Chevron2.default.extend is not a function
styled-components has some kind of inheritance
Chevron.jsx
import React from 'react'
import styled from 'styled-components'
const StyledChevron = styled.i`
display: flex;
align-items: center;
justify-content: center;
padding: 14px;
cursor: pointer;
border-left: 1px solid #efefef;
transition: all .1s linear;
transform: rotate(0deg);
${props => props.closed && ``};
&:hover {
background: #f7f4f4;
}
`
const Chevron = (props) => (
<StyledChevron
closed={props.item.closed}
onClick={() => props.openSubMenu(props.item.id)}
className={props.icon}
/>
)
export default Chevron
Header.jsx
import React from 'react'
import styled from 'styled-components'
import cssvars from '../../js/style/vars'
import Chevron from './Chevron'
const StyledHeader = styled.div`
display: flex;
align-items: center;
padding: 11px;
justify-content: space-between;
background: ${cssvars.primaryColor};
h2 {
font-size: 19px;
color: #fff;
display: flex;
align-items: center;
}
`
const BackChevron = styled(Chevron)`
padding: 0
`
const Header = (props) => (
<StyledHeader>
<h2>{props.item.title}</h2>
<BackChevron {...props} icon="icon-arrow-left"/>
</StyledHeader>
)
export default Header
as said in #yury-tarabanko comment