Javascript I'；我试图在js文件中包含CSS代码。但不起作用

所以我是新手，我真的不知道我做错了什么，我试图在JS文件中使用一些CSS代码，但不起作用 它显示一个白色屏幕 它假设设置导航栏的样式，但反引号中的代码不起作用 也许原因很傻，但我是新来的，所以我不知道我为什么要补充 我希望你能帮助我

代码如下：

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;

CSS:
从“样式化组件”导入样式化；
从'react router dom'导入{Link as LinkR}
export const Nav=styled.Nav`
背景：#000；
高度：80px；
/*利润上限：-80px*/
显示器：flex；
证明内容：中心；
对齐项目：居中；
位置：粘性；
排名：0；
z指数：10；
@媒体屏幕和屏幕（最大宽度：960像素）{
过渡：0.8秒全部缓解；
}
`
export const NavbarContainer=styled.div`
显示器：flex；
证明内容：之间的空间；
高度：80px；
z指数：1；
宽度：100%；
填充：0 24px；
最大宽度：1100px；
`
export const NavLogo=样式化（LinkR）`
颜色：红色；
调整内容：灵活启动；
光标：指针；
字体大小：1.5rem；
显示器：flex；
对齐项目：居中；
左边距：24px；
字体大小：粗体；
文字装饰：无；
`
///////////////////////////////////////////////////////
HTML:
从“React”导入React
从“/navparElements”导入{Nav，NavbarContainer，NavLogo}
函数索引（）{
返回(
盖茨克
)
}
导出默认索引
///////////////////////////////////////////////////////
以及：
导入“/App.css”；
从“./component/Navbar”导入导航栏；
从“react Router dom”导入{BrowserRouter as Router}
函数App（）{
返回(
);
}
导出默认应用程序；

您的代码中有一些拼写错误，您必须遵守Youtube教程，对吗？CMIIW。在学习react之前，您应该对react中的工作原理以及如何进行react有一个基本的了解。在本例中，您正在JS库中使用CSS，名为

样式化组件

，您可以在本文中了解有关样式化组件的更多信息。下面是我已经修复的一些代码：

// 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;

//navbarElements.js
从“样式化组件”导入样式化；
从'react router dom'导入{Link as LinkR}
export const Nav=styled.Nav`
背景：#000；
高度：80px；
/*利润上限：-80px*/
显示器：flex；
证明内容：中心；
对齐项目：居中；
位置：粘性；
排名：0；
z指数：10；
@媒体屏幕和屏幕（最大宽度：960像素）{
过渡：0.8秒全部缓解；
}
`
export const NavbarContainer=styled.div`
显示器：flex；
证明内容：之间的空间；
高度：80px；
z指数：1；
宽度：100%；
填充：0 24px；
最大宽度：1100px；
`
export const NavLogo=样式化（LinkR）`
颜色：红色；
调整内容：灵活启动；
光标：指针；
字体大小：1.5rem；
显示器：flex；
对齐项目：居中；
左边距：24px；
字体大小：粗体；
文字装饰：无；
`
//Navbar.js
从“React”导入React
从“/navbarElements”导入{Nav，NavbarContainer，NavLogo}
函数索引（）{
返回(
盖茨克
)
}
导出默认索引
//App.js
导入“/App.css”；
从“./component/Navbar”导入导航栏；
从“react Router dom”导入{BrowserRouter as Router}
函数App（）{
返回(
);
}
导出默认应用程序；

您的代码中有一些拼写错误，您必须遵守Youtube教程，对吗？CMIIW。在学习react之前，您应该对react中的工作原理以及如何进行react有一个基本的了解。在本例中，您正在JS库中使用CSS，名为

样式化组件

，您可以在本文中了解有关样式化组件的更多信息。下面是我已经修复的一些代码：

// 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;

//navbarElements.js
从“样式化组件”导入样式化；
从'react router dom'导入{Link as LinkR}
export const Nav=styled.Nav`
背景：#000；
高度：80px；
/*利润上限：-80px*/
显示器：flex；
证明内容：中心；
对齐项目：居中；
位置：粘性；
排名：0；
z指数：10；
@媒体屏幕和屏幕（最大宽度：960像素）{
过渡：0.8秒全部缓解；
}
`
export const NavbarContainer=styled.div`
显示器：flex；
证明内容：之间的空间；
高度：80px；
z指数：1；
宽度：100%；
填充：0 24px；
最大宽度：1100px；
`
export const NavLogo=样式化（LinkR）`
颜色：红色；
调整内容：灵活启动；
光标：指针；
字体大小：1.5rem；
显示器：flex；
对齐项目：居中；
左边距：24px；
字体大小：粗体；
文字装饰：无；
`
//Navbar.js
从“React”导入React
从“/navbarElements”导入{Nav，NavbarContainer，NavLogo}
函数索引（）{
返回(
盖茨克
)
}
导出默认索引
//App.js
导入“/App.css”；
从“./component/Navbar”导入导航栏；
从“react Router dom”导入{BrowserRouter as Router}
函数App（）{
返回(
);
}
导出默认应用程序；