Having trouble overriding the default Calendar.css file in NextJS while creating a calendar component. Even after adding my own custom styles, they aren't being applied. Deleting the css file contents doesn't change the format either. Only when commenting out the import css line does the style return to normal. Could this be a bug related to React 18/Nextjs? Tested in both chrome and firefox with identical results. https://i.stack.imgur.com/IenRI.jpghttps://i.stack.imgur.com/j4obW.jpg
The first image shows the display after applying the default css styling from the module. The second image displays how I want it to look after overriding the default css file.
.react-calendar {
width: 350px;
max-width: 100%;
background: white;
border: 1px solid #a0a096;
font-family: Arial, Helvetica, sans-serif;
line-height: 1.125em;
}
... (CSS code continues)
This is the default css style.
.react-calendar {
width: 400px;
max-width: 100%;
background-color: #fff;
color: #222;
... (More CSS code)
}
This is the custom styling I am trying to implement. Even if all content from Calendar.css is deleted, the initial styling still persists.
// App.js
import { useState } from "react";
import Calendar from "react-calendar";
import "react-calendar/dist/Calendar.css";
function cal() {
const [date, setDate] = useState(new Date());
return (
<div className="app">
<h1 className="text-center">React Calendar</h1>
... (JSX markup continued)
</div>
);
}
export default cal;
This is where the calendar component is being created.