diff --git a/components/doc/theming/scopedstyling/cssmodulesdoc.js b/components/doc/theming/scopedstyling/cssmodulesdoc.js index 0bae939647..0dc54d84ff 100644 --- a/components/doc/theming/scopedstyling/cssmodulesdoc.js +++ b/components/doc/theming/scopedstyling/cssmodulesdoc.js @@ -7,7 +7,7 @@ export function CSSModulesDoc(props) { const code1 = { basic: ` /* paneldemo.module.css */ -.mypanel > [class~="p-panel-header"] { +.mypanel :global(.p-panel-header) { background-color: #07c4e8; color: #ffffff; } @@ -22,7 +22,7 @@ import panelDemoModule from './paneldemo.module.css'; export default function PanelDemo() { return ( - +

Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat @@ -37,8 +37,7 @@ export default function PanelDemo() { <>

- CSS modules allow importing a css file to your react component and refer the classes inside using a variable. Unfortunately CSS modules do not support cascaded classes to be applied to external components however attribute - selectors can be used as a common workaround until PrimeReact exposes component internals via new properties. NextJS has built-in support for CSS modules allowing css files with .module.css suffix to be interpreted as + CSS modules allow importing a css file to your react component and refer the classes inside using a variable. To provide cascaded classes that is applied to external components, use :global selectors (check the CSS Modules documentation). NextJS has built-in support for CSS modules allowing css files with .module.css suffix to be interpreted as modules.