{"id":1249,"date":"2025-05-22T12:01:55","date_gmt":"2025-05-22T12:01:55","guid":{"rendered":"https:\/\/www.cmarix.com\/qanda\/?p=1249"},"modified":"2026-02-05T12:06:06","modified_gmt":"2026-02-05T12:06:06","slug":"css-modules-in-react","status":"publish","type":"post","link":"https:\/\/www.cmarix.com\/qanda\/css-modules-in-react\/","title":{"rendered":"What are CSS Modules in React?"},"content":{"rendered":"\n<p>CSS Modules are CSS files where class names and animation names are locally scoped by default. Name these files as style.module.css for enabling this. After importing these files into a React component, an object is returned, which maps your original class names to unique, generated class names. This prevents global CSS conflicts between components.<\/p>\n\n\n\n<pre class=\"wp-block-code\"><code>\/* styles.module.css *\/\n.button {\n  background-color: red;\n}\nimport styles from '.\/styles.module.css';\n&lt;button className={styles.button}>Click&lt;\/button>\n<\/code><\/pre>\n","protected":false},"excerpt":{"rendered":"<p>CSS Modules are CSS files where class names and animation names are locally scoped by default. Name these files as style.module.css for enabling this. After importing these files into a React component, an object is returned, which maps your original class names to unique, generated class names. This prevents global CSS conflicts between components.<\/p>\n","protected":false},"author":2,"featured_media":1251,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"_acf_changed":false,"footnotes":""},"categories":[6,3],"tags":[],"class_list":["post-1249","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-react","category-web"],"acf":[],"_links":{"self":[{"href":"https:\/\/www.cmarix.com\/qanda\/wp-json\/wp\/v2\/posts\/1249","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/www.cmarix.com\/qanda\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/www.cmarix.com\/qanda\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/www.cmarix.com\/qanda\/wp-json\/wp\/v2\/users\/2"}],"replies":[{"embeddable":true,"href":"https:\/\/www.cmarix.com\/qanda\/wp-json\/wp\/v2\/comments?post=1249"}],"version-history":[{"count":4,"href":"https:\/\/www.cmarix.com\/qanda\/wp-json\/wp\/v2\/posts\/1249\/revisions"}],"predecessor-version":[{"id":1255,"href":"https:\/\/www.cmarix.com\/qanda\/wp-json\/wp\/v2\/posts\/1249\/revisions\/1255"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/www.cmarix.com\/qanda\/wp-json\/wp\/v2\/media\/1251"}],"wp:attachment":[{"href":"https:\/\/www.cmarix.com\/qanda\/wp-json\/wp\/v2\/media?parent=1249"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.cmarix.com\/qanda\/wp-json\/wp\/v2\/categories?post=1249"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.cmarix.com\/qanda\/wp-json\/wp\/v2\/tags?post=1249"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}