I am currently navigating my way through NextJS and attempting to incorporate a bespoke stylesheet into my code using a third-party widget. Unfortunately, I have hit a roadblock in this process. The names I have assigned to the style sheet align with what the third party expects, as per the information they provided me. I am importing the stylesheet directly onto the page where it is required, rather than including it in the global file.
The third-party widget is loaded through a script, which retrieves the element by its ID.
var widgetDiv = document.getElementById('widget');While I possess a style sheet, I am unsure about how to integrate it. Here is the import statement for the style sheet:
import styles from '../styles/widget.module.css';Below is a snippet of the actual style definitions:
.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;}
Although I have written the necessary code to incorporate these styles, there doesn't seem to be any effect.
<div id="widget" className={styles["widget-next-available-line"]}></div>
If you could provide guidance on the correct method to implement these styles, it would be greatly appreciated.