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.
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'm a benninger learning React with Styled Components.
App.js
const BasicButton = styled.button`
background-color: purple;
`;
Increase.js
const StyledButtonIncrease = styled(props.BasicButton)`
padding: 2rem;
border: none;
border-radius: 7px;
`;
How can I receive a Styled Component in another React component to extend the styling? I tried to use the example above but it didn't work.
What you will actually do is export the styled that you want to extend and import it in the file that you will create your new styled.
ex:
App.js
export const BasicButton = styled.button`
background-color: purple;
`;
increase.js
import { BasicButton } from '../App.js';
const StyledButtonIncrease = styled(BasicButton)`
padding: 2rem;
border: none;
border-radius: 7px;
`;
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
I've created the following styled-component for my gatsby project.
import React from "react"
import styled, { css } from 'styled-components'
const Button = styled.div`
background-color: #4E58F5;
width: 200px;
padding: 20px;
margin-right: 30px;
margin-top: 30px;
border-radius: 30px;
color: #FFFFFF;
transition: background-color 0.25s ease;
${props => props.primary && css`
background-color: #FFF;
color: red;
`}
`;
export default props => (
<Button>{props.buttonText}</Button>
)
I've not found the examples in the documentation to be clear or consistent enough to understand how I should be passing in the "primary" option to my components.
I'm trying to do the following, on my index.js page. The Button renders, but the primary word has no effect. What am I missing here?
<Button primary buttonText="Submit" />
The component you're exporting, does not recognize the primary property, and thus cannot pass it on to the Button element. You can fix this either by exporting the styled component itself, or by passing unrecognized props to the Button.
const Button = styled.div`
[...]
`;
export default Button;
OR
export default ({buttonText, ...props})=>(
<Button {...props}>{buttonText}</Button>
);
I want to add buttons, form element etc to my component, but they appear without styling. How can I let them render using the theme styling?
Any common componets for buttons/dropdowns/tabs or css classes I can use and how?
I haven't found a good way to actually inherit the styles because they used styled components (Emotion). I've actually been rebuilding flex components (which seems like a waste to be honest).
Here's how I recreated a Flex button:
./src/components/FlexButton/FlexButton.jsx
import React from 'react';
import FlexButtonStyles from './FlexButton.Styles';
const FlexButton = (props) => {
return (
<FlexButtonStyles {...props} />
);
};
export default FlexButton;
./src/component/FlexButton/FlexButton.Styles.js
import { default as styled } from 'react-emotion';
import { withTheme } from '#twilio/flex-ui';
const FlexButtonStyles = styled('button')`
align-self: center;
height: 28px;
font-size: 10px;
font-weight: bold;
letter-spacing: 2px;
white-space: nowrap;
color: rgb(255, 255, 255);
padding: 0px 16px;
border-width: initial;
border-style: none;
border-color: initial;
border-image: initial;
background: linear-gradient(to top, ${props => props.theme.colors.defaultButtonColor}, ${props => props.theme.colors.defaultButtonColor});
outline: none;
border-radius: 100px;
:hover {
background-color: rgba(0, 0, 0, 0.2);
background-blend-mode: color;
}
:disabled{
background: ${props => props.theme.colors.disabledColor};
}
`;
export default withTheme(FlexButtonStyles);
I stole all the CSS by just reviewing the live source code.