Styled-Components is giving an undefined component error - javascript

I'm using styled-components with react. When I tried importing my component into my App.js. It gives an Uncaught Error of an undefined component.
Here is my styled-component, Header.js:
import React from "react";
import styled from "styled-components";
import { ReactComponent as LogoSVG } from "./logo.svg";
export const Logo = styled(LogoSVG)`
height: auto;
max-width: 760px;
width: 100%;
`;
export const Header = styled.header`
box-sizing: border-box;
display: flex;
pointer-events: none;
position: fixed;
width: 100vw;
z-index: 1;
justify-content: center;
padding: 30px;
`;
const HeaderComponent = () => (
<Header>
<Logo title="LavaLab Logo "/>
</Header>
);
export default HeaderComponent;
Here is App.js where I import my component:
import React from "react";
import { StrictMode } from "react";
import { createRoot } from "react-dom/client";
import { GlobalStyle } from "./styles.js";
import HeaderComponent from "./Components/Header";
const App = () => {
return (
<div>
<GlobalStyle />
<HeaderComponent />
</div>
);
};
const root = createRoot(document.getElementById("root"));
root.render(
<StrictMode>
<App />
</StrictMode>
);
This is the updated error.
Am I missing something?

Related

Styled Component v5.3 createGlobalStyles not Working

I'm trying to create Global Styles for my application using createGlobalStyles but somehow the components are not rendering and I am getting a console warning.
App.js
import GlobalStyles from "./styles/GlobalStyles";
function App() {
return (
<div className="App">
<GlobalStyles>
<h1>This is a test line</h1>
</GlobalStyles>
</div>
);
}
export default App;
GlobalStyles.js
import { createGlobalStyle } from "styled-components";
const GlobalStyles = createGlobalStyle`
html {
font-size: 8px;
}
* {
padding: 0;
margin: 0;
box-sizing: border-box;
font-weight: 200;
}
body {
font-size: 8px;
}
h1 {
font-size: 2rem;
}
`;
export default GlobalStyles;
Console Error[enter image description here][1]
GlobalStyle.js:28 The global style component sc-global-dtGiqY was given child JSX. createGlobalStyle does not render children.
Error Screenshot
https://i.stack.imgur.com/QJBLz.png
Place <GlobalStyles /> as a sibling to your other content—not as a parent element trying to accept children.
<div className="App">
<GlobalStyles />
<h1>This is a test line</h1>
</div>

how to apply width to css flexbox

Rendering a list of titles and trying to give them width or flex but it's not working default width of 133px is used by tag but works on static data only min-width is working. How can I use flex or width to my tag?
import React, { Component } from "react";
import { NavLink, BrowserRouter } from "react-router-dom";
import "./chooseCategory.scss";
import { categoryList } from "./categoryList";
import axios from "axios";
class chooseCategory extends Component {
state = {
recdata: [],
};
async componentDidMount() {
let data = await axios.get(`https://jsonplaceholder.typicode.com/posts`);
this.setState({
recdata: data.data,
});
}
render() {
console.log(this.state.recdata);
return (
<div className="chooseCategory">
{this.state.recdata.map((title) => (
<p className="categoryLink">{title.title}</p>
))}
</div>
);
}
}
export default chooseCategory;
.chooseCategory {
display: flex;
flex-flow: row nowrap;
overflow: scroll;
.categoryLink {
width: 200px;
margin-right: 10px;
border: 1px solid black;
}
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/16.6.1/umd/react.production.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react-dom/16.6.1/umd/react-dom.production.min.js"></script>
You should add flex-shrink: 0 to .categoryLink.
Here is a working example: https://codesandbox.io/s/snowy-sun-elo7d?file=/src/App.js

Dynamic styled-component tag name

I'm using styled-components with styled-icons. I have:
import { Facebook } from 'styled-icons/feather/Facebook'
import { Twitter } from 'styled-icons/feather/Twitter'
import { Instagram } from 'styled-icons/feather/Instagram'
...
const FacebookIcon = styled(Facebook)`
width: 10px;
color: black;
`
const TwitterIcon = styled(Twitter)`
width: 10px;
color: black;
`
const InstagramIcon = styled(Instagram)`
width: 10px;
color: black;
`
...
render () {
return (
<Fragment>
<FacebookIcon />
<TwitterIcon />
<InstagramIcon />
</Fragment>
)
}
What would be a good way to DRY out this code?
So I can use these icons like:
<Icon name='Facebook' />
or
{ renderIcon(Facebook) }
You could do this:
import React from "react";
import ReactDOM from "react-dom";
import styled from "styled-components";
import { Facebook } from "styled-icons/feather/Facebook";
const IconWrapper = styled.div`
width: 10px;
color: black;
`;
const App = () => {
return (
<React.Fragment>
<IconWrapper>
<Facebook />
</IconWrapper>
</React.Fragment>
);
};
const rootElement = document.getElementById("root");
ReactDOM.render(<App />, rootElement);
CodeSandbox here.

Blank page when deploying React website on Netlify

I'm trying to deploy my personal website using React but it's showing a blank page with the following error on the React imports. It works fine on a local host. I've wasted an entire day trying to solve it but with no success. Any ideas on what might be the issue? Thanks in advance.
Error: "Unexpected identifier 'React'. import call expects exactly one argument" on first line
import React from 'react';
import ReactDOM from 'react-dom';
import { BrowserRouter } from 'react-router-dom';
// import injectGlobal helper
import { injectGlobal } from 'styled-components';
import Main from './app/Main';
// Global style
injectGlobal`
html,
body,
#app,
.wrapper {
min-height: 100vh;
height: 100%;
}
html {
box-sizing: border-box;
font-size: 100%;
}
* {
&,
&::after,
&::before {
box-sizing: inherit;
}
}
body {
padding: 0;
margin: 0;
font: 1rem / 1.414 Roboto;
}
`
const wrapper = document.getElementById('app')
const App = () => (
<BrowserRouter>
<Main />
</BrowserRouter>
)
ReactDOM.render(<App />, wrapper)

Add styles to Styled Component custom Component in React Native

I have button.js:
import React from "react";
import styled from "styled-components";
const StyledButton = styled.TouchableOpacity`
border: 1px solid #fff;
border-radius: 10px;
padding-horizontal: 10px;
padding-vertical: 5px;
`;
const StyledButtonText = styled.Text`
color: #fff;
font-size: 12;
`;
export default ({ children }) => (
<StyledButton>
<StyledButtonText>{children.toUpperCase()}</StyledButtonText>
</StyledButton>
);
And its usage:
import React, { Component } from "react";
import styled from "styled-components";
import Button from "./button";
const StyledNavView = styled.View`
justify-content: flex-end;
flex-direction: row;
background: #000;
padding-horizontal: 10px;
padding-vertical: 10px;
`;
const StyledTodayButton = styled(Button)`
margin: 10px;
`;
export default class Nav extends Component {
render() {
return (
<StyledNavView>
<StyledTodayButton>Today</StyledTodayButton>
<Button>Previous</Button>
</StyledNavView>
);
}
}
Problem is, the margin I apply in StyledTodayButton is actually never applied. Have I misunderstood extending styles in Styled Components?
There are 2 ways to make it work:
extend button style:
const StyledTodayButton = Button.extend'margin: 10px'
pass prop to button:
const Button = styled.button'
/* ...your props */
margin: ${props => props.withMargin ? '10px' : '0px'};
and then call in render method you can invoke it with:
<Button withMargin {...restProps} />

Categories