TypeError: styled_components__WEBPACK_IMPORTED_MODULE_0__.default.video 不是反应中的函数

Question

我正在尝试在位于 vedios 文件夹中的网页上播放视频。

我安装了 npm i styled-components

index.js：

import React from 'react';
import Vedio from "../../vedios/home_vedio.mp4";
import { HeroContainer, HeroBg, VedioBg } from './HeroElements';

const HeroSection = () => {
    return (
        <HeroContainer>
            <HeroBg> 
                <VedioBg autoPlay loop muted src={Vedio} type = 'vedio/mp4' />
            </HeroBg>    
        </HeroContainer>
    )
}

export default HeroSection

HeroElements.js：

import styled from 'styled-components'
.....
.....
export const VedioBg = styled.vedio `
    width: 100%;
    height: 100%;
    -o-object-fit: cover;
    object-fit: cover;
    background: #232a34;
`

这是错误：

TypeError: styled_components__WEBPACK_IMPORTED_MODULE_0__.default.vedio 不是函数

我的导入部分有问题吗..！？

我是反应初学者，任何建议都会有所帮助。

Answer 1

您在该行中使用了错误的标签：

export const VedioBg = styled.vedio `

无论您将来使用什么react 或react-native，它们都没有带有该名称的标签。这很可能只是一个错字，使用video 标签是正确的

试试这个：

const HeroSection = () => {
    return (
        <HeroContainer>
            <HeroBg> 
                <VideoBg autoPlay loop muted src={Video} type = 'video/mp4' />
            </HeroBg>    
        </HeroContainer>
    )
}

export default HeroSection

import styled from 'styled-components'
.....
.....
export const VideoBg = styled.video `
    width: 100%;
    height: 100%;
    -o-object-fit: cover;
    object-fit: cover;
    background: #232a34;
`

附：我将vedio 固定在video 上，除了文件名。