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

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!