Open oskaryil opened 5 months ago
@oskaryil I've checked this and importing the scss file in a nextjs project with the latest version of ReactGrid should work correctly. Could you provide a sandbox with the reproduced issue?
@oskaryil I've checked this and importing the scss file in a nextjs project with the latest version of ReactGrid should work correctly. Could you provide a sandbox with the reproduced issue?
Strange. I have a more or less clean project using this template https://github.com/theodorusclarence/ts-nextjs-tailwind-starter. Did you try importing the scss file inside your own scss file?
Strange. I have a more or less clean project using this template https://github.com/theodorusclarence/ts-nextjs-tailwind-starter. Did you try importing the scss file inside your own scss file?
Yes, I have prepared a nextjs (14.2.0) template with the latest version of ReactGrid. Please take a look: https://stackblitz.com/edit/yet-another-react-lightbox-nextjs-nfavno?file=package.json
@oskaryil Is this issue still relevant?
Hey there!
This might happen because "non-pure" selectors are not allowed inside module SCSS files. I had this issue when importing my <component>.module.scss
inside the <component>.tsx
file.
For me, the solution was pretty straightforward:
./src/styles/reactgrid.scss
./src/pages/_app.tsx
If you want to know why this happens, please take a look at this discussion
EDIT: If you don't want to import the custom variables globally, follow this approach.
Thanks for this thread. At the moment, reactgrid.scss
contains one global selector, so it can't be imported as .module.scss
due to constraints imposed by Next.js.
I agree with the message on the screenshot with black background: add class to make it pure
@webloopbox Even though I found the usage of contenteditable
in the code during the copy handler, I couldn't figure out where it's being applied. Do we really need it?
@Igormandello This selector was likely added with Safari browsers in mind. The most sensible approach would be to apply a CSS class to this.
@webloopbox I have implemented something really similar to #402 and while testing I noticed something:
We don't need to remove the [contenteditable]
, because in the end - if we want to import styles.scss
inside a .module
file - we will need to compensate the global class names using a :global
selector inside the module class.
For example, one way of using it as a module could be:
// custom.module.scss
$primary-color: #4285f4;
.my-custom-module {
:global {
@import "@silevis/reactgrid/styles.scss";
.rg-input {
border: none;
}
}
}
and then, inside your component:
// Component.tsx
import style from "~/styles/custom.module.scss";
export default function Component() {
return (
<div className={style["my-custom-module"]}>
{/* ReactGrid component */}
</div>
);
}
Even if we remove the [contenteditable]
selector, the module will still not be pure unless we wrap it inside a custom class. If we wrap it inside a custom class, we don't need to remove the selector.
Hey there! This might happen because "non-pure" selectors are not allowed inside module SCSS files. I had this issue when importing my
<component>.module.scss
inside the<component>.tsx
file.For me, the solution was pretty straightforward:
- Move your custom SCSS file to
./src/styles/reactgrid.scss
- Import it inside
./src/pages/_app.tsx
If you want to know why this happens, please take a look at this discussion
Thanks! I just tried doing it this way and it works. I'll proceed with this workaround for now.
Describe the bug
I'm using sass in a Next.js React project. I'm unable to import the react-grid scss into my scss file.
Current behavior It's giving me this error:
Expected behavior I'd like to override the scss variables to edit the styles of the react-grid component.
Screenshots or gifs
Your environment details