I am making a Typescript and React app. I am using 4 main files, App.tsx, Header.tsx, Ap.css. I think the real problem is the way I am trying to use the add the Header.tsx file to App.tsx.
Please help
App.tsx:
import React from "react";
import Header from "./Header";
import "./App.css";
function App() {
return (
<div className="App">
<Header />
</div>
);
}
export default App;
Header.tsx:
import React from "react";
import "./Header.css";
function Header() {
return (
<div className="nav-container">
<nav>
Home
About
Projects
Resume
</nav>
</div>
);
}
export default Header;
App.css:
.App {
text-align: center;
color: white;
}
body {
background-color: #171A25;
color: #ffffff;
}
Header.css:
body {
margin: 0px;
background-color: #121625;
}
.nav-container {
text-align: center;
font-size: 24px;
color: white;
}
It looks like there is nothing wrong with your import method. I think you should check your webpack.config.js file. In resolve part should contain ts and tsx types.
resolve: {
extensions: ['.tsx', '.ts', '.js'],
},
and also you have to add tsconfig.json file to your project.
https://www.typescriptlang.org/docs/handbook/tsconfig-json.html
https://webpack.js.org/guides/typescript/
Related
I am making a personal website. The landing page is the first component. The second page is the About component but it is not rendering below the landing component. It is appearing at the top.
App.js file:
import "./App.css";
import Landing from "./components/Landing/Landing";
import About from "./components/About/About";
function App() {
return (
<div className="App">
<Landing/>
<About/>
</div>
);
}
export default App;
**App.css file: **
.App{
display: flex;
flex-direction: column;
}
body{
overflow-x: hidden;
}
::-webkit-scrollbar{
width: 8px;
}
::-webkit-scrollbar-track{
background: black;
border-radius: 1ex;
}
::-webkit-scrollbar-thumb{
background: #427898;
border-radius: 1ex;
}
::-webkit-scrollbar-corner {
background: black;
}
a{
text-decoration: none;
color: inherit
}
About.jsx file:
import React from 'react'
import css from "./About.module.css"
const About = () => {
return (
<div style={{ color: 'white' }}>About</div>
)
}
export default About
I have already tried creating a container class for About and then changing the display in my About.module.css file but the About text still remains at the top of the page unseen.This is the landing page and as you can see I want the About component to now be below the landing page as you scroll down.
I'm trying to set advanced usage Material UI v.4 Theme provider and StylesProvider
I can't use the "classes" prop of a component to override the styles.
I follow that instruction and some experience from past projects.
Advanced Material UI v 4.12.3
My App.js:
import React from "react";
import ReactDOM from "react-dom";
import { Provider } from "react-redux";
import { ThemeProvider, StylesProvider } from "#material-ui/core/styles";
import theme from "./styles/theme";
import store from "./redux/store";
import AppRouter from "./routes/AppRouter";
import ErrorBoundary from "./ErrorBoundary";
ReactDOM.render(
<Provider store={store}>
<ErrorBoundary>
<StylesProvider injectFirst>
<ThemeProvider theme={theme}>
<AppRouter />
</ThemeProvider>
</StylesProvider>
</ErrorBoundary>
</Provider>,
document.getElementById("root"),
);
part of package.json:
"dependencies": {
"#material-ui/icons": "^4.9.1",
"#material-ui/lab": "^4.0.0-alpha.56",
}
"devDependencies": {
"#material-ui/core": "^4.9.12",
"#material-ui/pickers": "^3.2.10",
}
theme.js
import { createTheme } from "#material-ui/core/styles";
const theme = createTheme({
palette: {
primary: {
main: "#08718f",
},
secondary: {
main: "#604486",
},
},
});
export default theme;
image-preview.scss
.previewButton {
border-radius: 10px;
border: 1px solid #dcdcdc;
margin-right: 7px;
margin-bottom: 7px;
opacity: 0.6;
&:hover {
border: 1px solid #3f51b5;
opacity: 1;
}
}
SomeComponent.js
import { Button } from "#material-ui/core";
import "../../styles/common/image-preview.scss";
{imageObj?.map((el, index) => (
<Button
className='previewButton'
key={el.id}
onClick={() => setSelectedImage(index)}
>
<img className='imageButton' src={el.url} alt={el.imgName} />
</Button>
))}
This code above works great. I can easily rewrite Material UI components with the flag "injectFirst" from App.js .
Inside Button, I can change the style className=`previewButton' it works
But if I made these changes.
I can't use the "classes" prop of a component to override the styles.
className={classes.previewButton}
SomeComponent.js
import { Button } from "#material-ui/core";
import classes "../../styles/globalStyle.module.scss";
{imageObj?.map((el, index) => (
<Button
className={classes.previewButton}
key={el.id}
onClick={() => setSelectedImage(index)}
>
<img className='imageButton' src={el.url} alt={el.imgName} />
</Button>
))}
globalStyle.module.scss
.previewButton {
border-radius: 10px;
border: 1px solid #dcdcdc;
margin-right: 7px;
margin-bottom: 7px;
opacity: 0.6;
&:hover {
border: 1px solid #3f51b5;
opacity: 1;
}
}
Maybe I missed something? Any help will help!
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?
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>
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)