如何使用 Next.js 设置 VideoJS 的样式

Question

我正在构建一个基于 VideoJS 的 React 视频组件，我曾经使用我的样式表来设置 VideoJS 播放器的样式，但是因为我按照 的建议导入了它Next.js 文档，一些 class 定位似乎无法正常工作，我的自定义 CSS 不适用于 .video-js css 组件。

这个有效：

.video {
    font-family: 'Inter', -apple-system, Helvetica;
    font-weight: bold;
}

.video *:before {
    text-shadow:  1px 1px 7px rgba(10, 10, 10, 0.5);
}

这个不起作用:

/* Big play button */
.video .vjs-big-play-button {
    height: 2em;
    width: 2em;
    font-size: 5em;
    line-height: 2em;
    border: none !important;
    border-radius: 9999px;
}

我的 VideoPlayer 组件:

import { useCallback, useEffect, useState } from 'react';
import videojs from 'video.js';
import 'video.js/dist/video-js.css'
import styles from '../styles/video-player.module.css';

function VideoPlayer(props) {
    const [videoEl, setVideoEl] = useState(null);
    const onVideo = useCallback((el) => {
        setVideoEl(el)
    }, [])

    useEffect(() => {
        if (videoEl == null) return
        const player = videojs(videoEl, props)
        return () => {
            player.dispose()
        }
    }, [props, videoEl])

    return (
        <div data-vjs-player>
            <video className={`video-js ${styles.video} vjs-big-play-centered`} ref={onVideo}/>
        </div>
    )
}

export default VideoPlayer;

正如我所提到的，我曾经以这种方式设置 video.js 播放器的样式，并且在我切换到 Next.js 之前它一直运行良好。更奇怪的是，检查页面时 .video class 没有出现在浏览器的开发人员工具中。

有什么方法可以让我使用 Next.js 正确应用我的自定义样式？

Answer 1

因此，在寻找解决方法后，我发现在 global.scss 文件中设置自定义视频组件的样式确实可行。我不是特别清楚具体原因，但你可以这样做：

这是我的global.scss文件：

/* Base styling */
/* .class { ... } */

/* VideoJS styling -> */
.video-js.video {

    * {
        & :before {
            text-shadow:  1px 1px 7px rgba(10, 10, 10, 0.5);
        }
    }

    &:hover {
        .vjs-big-play-button {
            background-color: rgba(255, 255, 255, 1);
        }
    }

    .vjs-big-play-button {
        height: initial;
        width: initial;
        font-size: 5em;
        line-height: 6.15rem;
        padding: 1em;
        border: none;
        border-radius: 9999px;
        background-color: rgba(255, 255, 255, 0.8);

        & :before {
            margin: 0;
            padding: 0;
        }

    }

    .vjs-control-bar {
        width: 90%;
        min-height: 5em;
        margin: 2rem auto;
        padding: 0 1em;
        border-radius: 1em;
    }
}

因此您不必在 VideoPlayer React 组件中导入“../styles/video-player/module.scss”

如何使用 Next.js 设置 VideoJS 的样式

How to style VideoJS with Next.js

css

import

video.js

next.js

react-component