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

Question

我正在构建一个基于 VideoJS 的反应视频组件，并且我曾经使用我的样式表设置 VideoJS 播放器的样式，但是因为我按照 Next.js 的建议导入了它文档中，某些类定位似乎无法正常工作，并且我的自定义 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 类在检查页面时不会出现在浏览器的开发人员工具中。

有没有办法可以使用 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”