CSS Modules + React

[jdmarlin]

Hello,

I'm using CSS modules in react, and was wondering how to apply the css files from node_modules?

I'm able to apply the fresh theme but not the styles from ag-grid.css

import styles from 'ag-grid-root/dist/styles/ag-theme-fresh.css';

<div className={classes["ag-theme-fresh"]}>

webpack:

use: [
              require.resolve('style-loader'),
              {
                loader: require.resolve('css-loader'),
                options: {
                  importLoaders: 1,
                  modules: true,
                  localIdentName: '[name]__[local]__[hash:base64:5]'
                },
              },

resolve: {
    alias: {
        "ag-grid": path.resolve('./node_modules/ag-grid')

jsx:

import 'ag-grid/dist/styles/ag-grid.css';
import 'ag-grid-root/dist/styles/ag-theme-fresh.css';

<div className="ag-theme-fresh">

[nelsondude]

Have you figured this out yet? I'm encountering the same issue ..

[anil1712]

I am also facing the same issue. Did anyone get any solution?

[bryly27]

The answer to this is here.
https://stackoverflow.com/questions/48010671/use-primereact-themes-with-css-modules-enabled-in-react-application

[v1nn1k]

Basically you have to ignore Ag-Grid style files when compiling your css-modules

[fortunee]

Basically you have to ignore Ag-Grid style files when compiling your css-modules

I'm not using Webpack, just React+Typescript. How would you suggest I resolve this? @v1nn1k

[CalvinJamesHeath]

I have the same issue, my grid styles are being overridden by media query css..

[rajendranv1988]

Use the below two npm commands to install the CSS and Style loader:

npm install style-loader - You can add the Version of the loaded if required
npm install css-loader

You are not required to change anything else.

[Yondo202]

1. npm i @ag-grid-community/all-modules

in Style.css

2. @import '@ag-grid-community/all-modules/dist/styles/ag-grid.css';
   @import '@ag-grid-community/all-modules/dist/styles/ag-theme-balham.css';

import "./Style.css"

[StephenCooper]

1. npm i @ag-grid-community/all-modules

in Style.css

2. @import '@ag-grid-community/all-modules/dist/styles/ag-grid.css';
   @import '@ag-grid-community/all-modules/dist/styles/ag-theme-balham.css';

import "./Style.css"

We are moving away from all-modules so please import the styles from core instead.

npm i @ag-grid-community/core

in Style.css

@import '@ag-grid-community/core/dist/styles/ag-grid.css';
@import '@ag-grid-community/core/dist/styles/ag-theme-balham.css';

import "./Style.css"

[tycali-powerschool]

Just a heads up StephenCooper this did not work for us I will have to alter the loader. No variant of @import and extra stylesheet styles the grid successfully yet.
Update 2: I'm at least seeing an attempt at styling if we add @import url( and include the full cdn url), but everything is set to height: 0 or height: 1px. Like everything. Feels like a sick joke lol all the rows seem to overlap. Probably by the time you all see this we'll have some workaround or something but the amount of overrides right now is getting out of hand. Just a heads up
Final update:
got it working by calling these, even though the dependencies go up to 27.1.0:
@import url("https://cdnjs.cloudflare.com/ajax/libs/ag-grid/25.1.0/styles/ag-grid.css");
@import url("https://cdnjs.cloudflare.com/ajax/libs/ag-grid/25.1.0/styles/ag-theme-material.css");

[StephenCooper]

Sorry I think I jumped into this ticket without knowing the full context and what the actual problem was. I was just aiming to point out that the all-modules packages are not the recommend source.

I guess you are targeting 25.1 as that matches the version of the code you are running?

[tycali-powerschool]

Hello, thanks for reaching out. We are actually changing the implementation as it doesn't seem best practice to target that version specifically in that manner. A note from my team to me:

The problem with this approach is that the availability of this service is completely out of our control. Let's reduce the spread of those scenarios.

We're now adding a new loader rule to accommodate the imports. Was assisted in the specific code needed. But to answer question we have the latest ^27.1.0 deps setup, I just could only find version 25.1 in cdnjs url as any higher version in that url returns 404. Thanks for reaching out though!

was tricky finding the new loader rules as even the online solutions do not have the same webpack config structure it seemed. Here's what we came up with though 👍

[MrFarhan]

4 Years of open issue and still issue exists.