如何使用 NextJS 将样式添加到外部小部件

Question

我是 NextJS 的新手，尝试使用第三方小部件在我的代码中实现自定义样式表，但没有成功。我所知道的样式表使用的名称与我从第三方收到此信息时所期望的名称相符。我正在将使用该工作表的页面上导入该工作表，而不是将其添加到全局文件中。

我正在使用通过脚本加载的第三方小部件。他们的代码获取 elementById。

var widgetDiv = document.getElementById('widget');

我有一个样式表，我不确定如何实现。这里是样式表的导入

import styles from '../styles/widget.module.css';

这是样式表的示例

.widget-table tr th {padding: 8px 0px; background-color: rgb(245, 245, 245); border: 1px solid rgb(190, 190, 190); color: rgb(80, 80, 80); line-height: 1.3; text-align: center;}

.widget-table-mobile-row {display: none}

.widget-day-cell {font-weight: 600; text-align: center; min-width: 100px; max-width: 125px; padding: 0px 5px; margin: 0px;}

我添加了以下代码来实现样式，但没有任何反应。

<div id="widget" className={styles["widget-next-available-line"]}></div>

请让我知道如何正确实现样式。谢谢！

Answer 1

如果您想覆盖 ID 为“widget”的元素，您可以在 CSS 文件中使用 id 选择器，如下所示：-

    #widget {
//add your style here

}

如果这不起作用，请为每种样式添加 !important，以便它具有优先级。