mirror of
https://github.com/Dvorinka/Devour.git
synced 2026-06-04 12:33:04 +00:00
Tomas Dvorak
17 lines
3.2 KiB
JSON
17 lines
3.2 KiB
JSON
{
|
|
"id": "7eeea146d9f353fd4e7381b4",
|
|
"source": "solid:signals",
|
|
"type": "github-document",
|
|
"title": "css-modules",
|
|
"content": "---\ntitle: CSS modules\norder: 3\nmainNavExclude: true\nuse_cases: \u003e-\n component styling, scoped styles, style encapsulation, preventing css\n conflicts, modular css\ntags:\n - styling\n - css\n - modules\n - scoped\n - components\n - encapsulation\nversion: '1.0'\ndescription: \u003e-\n Use CSS Modules in Solid for locally scoped styles, preventing global\n conflicts and ensuring component style encapsulation.\n---\n\nCSS Modules are CSS files where class names, animations, and media queries are scoped locally by default.\nThese provide a way to encapsulate styles within components, preventing global conflicts and optimizing the final output by bundling only the used selectors.\n\n## Creating CSS module files\n\nBegin by creating a CSS module file.\nConventionally, these files have a `.module.css` extension, like `style.module.css`.\nHowever, you can also use other extensions, such as `.scss` and `.sass`.\n\n```css\n/* styles.module.css */\n.foo {\n\tcolor: red;\n}\n.bar {\n\tbackground-color: blue;\n}\n```\n\n**Note:** Avoid the use of HTML tags in CSS modules.\nSince they are not considered pure selectors, it can lead to specificity issues which can make it more difficult to override with other styles and lead to unexpected behaviors.\n\n## Using modules in components\n\n1. **Importing styles:** In your component file (eg. `Component.jsx`), import the styles from the CSS module.\n\n```jsx\n// component.jsx\nimport styles from \"styles.module.css\";\n```\n\n2. **Applying styles:** Use the imported styles by referencing them as properties of the styles object in your JSX:\n\n```jsx\nfunction Component() {\n\treturn (\n\t\t\u003c\u003e\n\t\t\t\u003cdiv class={`${styles.foo} ${styles.bar}`}\u003eHello, world!\u003c/div\u003e\n\t\t\u003c/\u003e\n\t);\n}\n```\n\n3. **Using a single style:** If you only need one style from the module, import and apply it directly:\n\n```jsx\n// component.jsx\nimport styles from \"styles.module.css\";\n\nfunction Component() {\n\treturn (\n\t\t\u003c\u003e\n\t\t\t\u003cdiv class={styles.foo}\u003eHello, world!\u003c/div\u003e\n\t\t\u003c/\u003e\n\t);\n}\n```\n\n4. **Mixing with regular class names:** You can combine CSS module syntax with regular string class names, as well:\n\n```jsx\n// component.jsx\nimport styles from \"styles.module.css\";\n\nfunction Component() {\n\treturn (\n\t\t\u003c\u003e\n\t\t\t\u003cdiv class={`${styles.foo} container`}\u003eHello, world!\u003c/div\u003e\n\t\t\u003c/\u003e\n\t);\n}\n```\n\n**Note:** If your styles have dashes in their names, use bracket notation:\n\n```jsx\nconst className = styles[\"foo-with-dash\"];\n```",
|
|
"url": "https://github.com/solidjs/solid-docs/blob/HEAD/src/routes/guides/styling-components/css-modules.mdx",
|
|
"metadata": {
|
|
"path": "src/routes/guides/styling-components/css-modules.mdx",
|
|
"repo": "solidjs/solid-docs",
|
|
"repo_url": "https://github.com/solidjs/solid-docs.git",
|
|
"size": 2381,
|
|
"source_type": "github"
|
|
},
|
|
"hash": "d47ea2c709466a2d135f91af4c9da08d23b61112dadcd27b4deb09686f45bd5e",
|
|
"timestamp": "2026-02-23T11:43:00.1879234+01:00"
|
|
} |