I'm trying to include CSS code in js file. But not working

Question

So I'm new to this I don't really know what I'm doing wrong I'm trying to use some CSS code in JS file but not working it shows a white screen it suppose to style the Navbar but the code inside the back quotes doesn't work maybe the reason is silly but I'm new to this so I've no idea why should I add I hope you could help me

this is the code:

CSS:

import styled from 'styled-components';
import {Link as LinkR} from 'react-router-dom'

export const Nav = styled.nav`
    background: #000;
    height: 80px;
    /*margin-top: -80px;*/
    display: flex;
    justify-content: center;
    align-items: center;
    postiion: 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: red;
    justify-content: flex-start;
    cursor: pointer;
    font-size: 1.5rem;
    display: flex;
    align-items: center;
    margin-left: 24px;
    font-weight: bold;
    text-decoration: none;
`
///////////////////////////////////////////////////////
HTML:

import React from 'react'
import { Nav , NavbarContainer , NavLogo} from './navparElements'

function index() {
    return (
        <>
            <Nav>
                <NavbarContainer>
                    <NavLogo to='/'>GUIDECK</NavLogo>
                </NavbarContainer>
            </Nav>
        </>
    )
}

export default index

///////////////////////////////////////////////////////
and:

import './App.css';
import Navbar from './componant/Navbar';
import {BrowserRouter as Router} from 'react-router-dom'


function App() {
  return (
    <Router>
      <Navbar />
    
    </Router>
  );
}

export default App;

Answer 1

There are some typos in your code, you must be following this Youtube tutorial right? CMIIW. Before learn react you should have a basic understanding of how JSX works in react and how to styling a component in react. In this case, you're using CSS-in-JS library called styled-components, you can learn more about styled-components in this link. Here some of your code that I already fix it:

// navbarElements.js
import styled from 'styled-components';
import {Link as LinkR} from 'react-router-dom'

export const Nav = styled.nav`
    background: #000;
    height: 80px;
    /*margin-top: -80px;*/
    display: flex;
    justify-content: center;
    align-items: center;
    postiion: 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: red;
    justify-content: flex-start;
    cursor: pointer;
    font-size: 1.5rem;
    display: flex;
    align-items: center;
    margin-left: 24px;
    font-weight: bold;
    text-decoration: none;
`

// Navbar.js
import React from 'react'
import { Nav , NavbarContainer , NavLogo} from './navbarElements'

function index() {
    return (
        <>
            <Nav>
                <NavbarContainer>
                    <NavLogo to='/'>GUIDECK</NavLogo>
                </NavbarContainer>
            </Nav>
        </>
    )
}

export default index

// App.js
import './App.css';
import Navbar from './component/Navbar';
import {BrowserRouter as Router} from 'react-router-dom'


function App() {
  return (
    <Router>
      <Navbar />
    
    </Router>
  );
}

export default App;

Answer 2

I fixed this issue by installing the vscode-styled-components extension. https://marketplace.visualstudio.com/items?itemName=jpoissonnier.vscode-styled-components.

Here is the original solution:

https://stackoverflow.com/a/57743179/13996311