striped & highlightOnHover doesn't work

[Tomycl]

I'm using nextjs14, and followed what this page said: mantine-datatable/getting-started.
Meanwhile, css files order are correct:

import { ColorSchemeScript, MantineProvider } from '@mantine/core';

// 👇 Import the mantine-core layer CSS file;
//    this will automatically place it in a `mantine` layer
import '@mantine/core/styles.layer.css';

// 👇 Import the mantine-datatable layer CSS file;
//    this will automatically place it in a `mantine-datatable` layer
import 'mantine-datatable/styles.layer.css';

// 👇 Import your own CSS file;
//    make sure to specify the layers order with the `@layer` directive
//    inside that file
import './layout.css';

But striped & highlightOnHover doesn't work..

Why is this happening?

[icflorescu]

What is the content of your layout.css? That's where the actual order of the layers should be specified, like so:

/* 👇 Make sure the styles are applied in the correct order */
@layer mantine, mantine-datatable;

Are you using the latest non-alpha version (7.1.0 at this moment)?

Both should work fine, as seen on the docs website (which is also a Next.js application) and in the following screenshot:

[Tomycl]

Every file has been configured according to what you said, but I just realized that I made 2 mistakes here:
In layout.tsx, I wrote

import '@mantine/core/styles.layer.css';
import 'mantine-datatable/styles.layer.css';

as

import '@mantine/core/styles.css';
import 'mantine-datatable/styles.css';

The latter comes from the Mantine document(https://mantine.dev/getting-started/), but if I read your instructions(mantine-datatable/styling/) carefully, I won't make this mistake.

Anyway, thank you for providing such a great mantine-datatable library, which has been a great help to me!