primevue-mirror/doc/theming/CSSModulesDoc.vue

<template>
    <DocSectionText v-bind="$attrs">
        <p>
            <a href="https://github.com/css-modules/css-modules">CSS modules</a> are supported by enabling the <i>module</i> property on a style element within your component and using the <i>$style</i> keyword to apply classes to a PrimeVue
            component.
        </p>
        <div class="card flex justify-content-center">
            <InputText :class="$style.myinput" placeholder="Search" />
        </div>
        <DocSectionCode :code="code1" hideToggleCode importCode hideStackBlitz />
        <DocSectionCode :code="code2" hideToggleCode hideStackBlitz />
        <p>An in-depth video tutorial is available to cover advanced uses cases with Pass Through props.</p>
        <div class="video-container">
            <iframe width="560" height="315" src="https://www.youtube.com/embed/n5zvMo7ykgw?si=lw1dGEHclmhIfZTr" frameborder="0" allowfullscreen></iframe>
        </div>
    </DocSectionText>
</template>

<script>
export default {
    data() {
        return {
            code1: {
                basic: `
<style module>
.myinput {
    border-radius: 2rem;
    padding: 1rem 2rem;
    border-width: 2px;
}
</style>
`
            },
            code2: {
                basic: `
<template>
    <InputText :class="$style.myinput" placeholder="Search" />
</template>
`
            }
        };
    }
};
</script>

<style module>
.myinput {
    border-radius: 2rem;
    padding: 1rem 2rem;
    border-width: 2px;
}
</style>