Style of the Custom Library not affecting in Webpart where using custom lbrary

[devanihiren]

Target SharePoint environment

SharePoint Online

What SharePoint development model, framework, SDK or API is this about?

💥 SharePoint Framework

Developer environment

None

What browser(s) / client(s) have you tested

• [ ] 💥 Internet Explorer
• [ ] 💥 Microsoft Edge
• [X] 💥 Google Chrome
• [ ] 💥 FireFox
• [ ] 💥 Safari
• [ ] mobile (iOS/iPadOS)
• [ ] mobile (Android)
• [ ] not applicable
• [ ] other (enter in the "Additional environment details" area below)

Additional environment details

• browser version
• SPFx version
• Node.js version
• etc

Describe the bug / error

Want to use custom react library to the webpart below is component of the react library

import * as React from 'react';
import './style.css';

interface Props {
  text: string
}

export const ExampleComponent = ({ text }: Props) => {
  return <div className="heading " >Example Component: {text}</div>
}

below is style.css file .heading { color: red !important; }

above class not change color of the text text color changes when i apply CSS file from the SPFx webpart or inline CSS only works.

How i can use library CSS class for the styling

Steps to reproduce

npx create-react-library <LIBRARY> Cd <LIBRARY> Npm pack Install generated .tgz in SPFx Project use like other library

Expected behavior

Want to affect style clas from the library stylle.css file

[StfBauer]

create-react-library are almost 4 years old and haven't been updated since then. I wouldn't recommend to use it.

However you cannot use it in this ways in SPFx. SPFx uses CSS Modules

So when you use your component it will become something like:

.header_abcdef{
   color: red !important;
}

Which is not applied on your div element, which still has the className of just heading and not heading_abcdeg.

You could make it work if you import the style file from the library in the SPFx library something like this.

@use 'sass:meta';

:global{
   @include meta.load-css('path-to-library-css/lib.css')
}

[devanihiren]

Tried CSS Modules Not working

[Ashlesha-MSFT]

Hello @devanihiren, Thank you for bringing this issue to our attention. We will look into it and get back to you shortly.

[Ashlesha-MSFT]

@devanihiren, Could you please confirm if you’ve had a chance to review the guidance provided in the Microsoft documentation on referencing third-party CSS styles in SPFx https://learn.microsoft.com/en-us/sharepoint/dev/spfx/web-parts/guidance/reference-third-party-css-styles ? This might help resolve the issue with the styles from your custom React library not being applied as expected.

[Ashlesha-MSFT]

We are closing this issue for now. If the problem persists, feel free to reopen it or open a new one.