Skip to main content
cancel
Showing results for 
Search instead for 
Did you mean: 

Be one of the first to start using Fabric Databases. View on-demand sessions with database experts and the Microsoft product team to learn just how easy it is to get started. Watch now

Reply
Túlio
Frequent Visitor

How can I configure CSS modules to style my visual with react - powerbi-visuals-api

How can I access "styles.title" like the example below?

 

 

 

 

 

import * as React from "react"; 
import styles from "./styles.module.css"; 

export class Visual implements IVisual { 
    constructor(options: VisualConstructorOptions) { 
        const element = document.createElement("div"); 
        element.className = styles.title; 
        element.innerText = "Hello, Power BI!"; 
        options.element.appendChild(element); 
    } 
}

 

 

 

 

 

I am using "powerbi-visuals-api": "5.11.0"

1 ACCEPTED SOLUTION

I changed the property "esModules" to false, which works for me.

 

{
	test: /\.css$/,
	include: /\.module\.css$/,
	exclude: /node_modules/,
	use: [
	  'style-loader',
	  {
		loader: 'css-loader',
		options: {
		  esModule: false,
		  modules: {
			localIdentName: '[name]__[local]__[hash:base64:5]'
		  }
		},
	  },
	],
}

 

View solution in original post

6 REPLIES 6
hackcrr
Super User
Super User

@Túlio 

You need to make sure your project has the dependencies required by CSS modules installed. You may need the css-loader dependency required by Webpack. Here is the code to install the corresponding dependencies:

npm install css-loader style-loader --save-dev

Modify your Webpack configuration to support CSS modules:

module.exports = {
    module: {
        rules: [
            {
                test: /\.css$/,
                use: [
                    {
                        loader: 'style-loader'
                    },
                    {
                        loader: 'css-loader',
                        options: {
                            modules: true
                        }
                    }
                ]
            }
        ]
    }
};

Create a CSS Modules file:

/* styles.module.css */
.title {
    color: blue;
    font-size: 24px;
    font-weight: bold;
}

In your React component or Power BI visual, import the CSS module:

import * as React from "react";
import styles from "./styles.module.css";

export class Visual implements IVisual {
    constructor(options: VisualConstructorOptions) {
        const element = document.createElement("div");
        element.className = styles.title;  // This accesses the .title class from your CSS module
        element.innerText = "Hello, Power BI!";
        options.element.appendChild(element);
    }
}

When you set element.className to styles.title , it applies the styles defined in the CSS module to that element. The class name is automatically scoped to avoid conflicts with other styles.

 

hackcrr

If I have answered your question, please mark my reply as solution and kudos to this post, thank you!

It doesn't work for me 😓.

This is not working for me. I'm still not able to import it as

import styles from "./styles.module.css";

 Is there some other solution?

I changed the property "esModules" to false, which works for me.

 

{
	test: /\.css$/,
	include: /\.module\.css$/,
	exclude: /node_modules/,
	use: [
	  'style-loader',
	  {
		loader: 'css-loader',
		options: {
		  esModule: false,
		  modules: {
			localIdentName: '[name]__[local]__[hash:base64:5]'
		  }
		},
	  },
	],
}

 

Hi, @Túlio 
We are very glad to know that the issue has been resolved. If you wish, consider accepting your solution as a solution that will also benefit other community members who have the same problem as you and find a solution faster.

Of course, if there is anything else we can do for you, please do not hesitate to contact us.

Looking forward to your reply.

Best Regards,

Leroy Lu

v-linyulu-msft
Community Support
Community Support

Hi, @Túlio 
 

Thanks for your detailed explanation, I am more than willing to help you out.
 

As far as I understand, if you want to go through a custom CSS file, I hope you can check if it meets the requirements of the custom visual.

Here are the relevant documents I found that I hope will help you:

Create a React-based visual for Power . - Power BI | Microsoft Learn
Get your Power BI visuals certified - Power BI | Microsoft Learn
 

Of course, if you only want to implement custom visuals in Desktop, you can try to find out if there are similar custom visuals in your app that can run your CSS files.


For the issue you mentioned, it would be more advisable to post your question in
Custom Visuals Development community to get professional support in time.We've now moved your question to that forum.

 

Here is the link to the forum you need:
Custom Visuals Development Discussion - Microsoft Fabric Community

Best Regards,

Leroy Lu

Helpful resources

Announcements
Las Vegas 2025

Join us at the Microsoft Fabric Community Conference

March 31 - April 2, 2025, in Las Vegas, Nevada. Use code MSCUST for a $150 discount!

Dec Fabric Community Survey

We want your feedback!

Your insights matter. That’s why we created a quick survey to learn about your experience finding answers to technical questions.

ArunFabCon

Microsoft Fabric Community Conference 2025

Arun Ulag shares exciting details about the Microsoft Fabric Conference 2025, which will be held in Las Vegas, NV.

December 2024

A Year in Review - December 2024

Find out what content was popular in the Fabric community during 2024.

Top Kudoed Authors